自适应布局 rem/px/em/流式布局/flex/栅格系统比较 (后续补充grid)

679 阅读1分钟

很长时间没写文章了  一直忙着其他的事情 疫情期间待在家也没积极学习  沉浸在家晒太阳刷剧中了 之前的node.js 搭建后台的项目也只起了个开头(捂脸。。。。。。。。。。主要还是自己懒🤣🤣🤣🤣)。今天刚好早上在公司做早会分享  做了一次自适应布局的分享,正好整理了下资料,这里记录一下。

上资料


总结: ui设计师给的图是1920 x 1080 的标准去设计的,拿到设计图后 , 自定义切换成css  rem , 默认字体大小14pxb标准的设计图。

页面写样式时,根据设计图量出元素的尺寸,样式采用rem单位。结合(媒体查询 + rem单位)用js去查询设备尺寸,根据不同尺寸设置根元素不同的font-size大小,实现页面样式自动调整,至此实现页面的样式自适应调整。

题外话: 小程序端rpx单位 同理  忘了加入grid布局的比较了(大佬提醒忘了加上grid!!感谢ing~😙😁😁  有兴趣的伙伴可以去自己搜索下 资料  推荐



阮一峰大大 gird布局👈👈


分享:(捂脸中,感谢ing😘😘。。。。。😜😁🥰🥰)👉👉比幕鱼--在线协同办公 白板工具

希望自己之后积极些记录分享下😅😅😅