移动适配

89 阅读1分钟

刚刚做过PC端的页面布局的你,有没有想过移动端是怎样布局,是不是还是和PC端布局一模一样呢?

废话不多说开始进入今天的主题,我们PC端布局网页时是用绝对单位px,而我们移动端用到的是rem,

rem:它是一个长度单位,它的作用为了适应各种移动设备的宽度,同通俗点讲,就是我们的网页会随手机、平板宽度的变化而改变。

我们rem是相对单位,它是相对于html下font-size字体大小 1rem = html字体大小

相对单位.png

- rem移动适配——媒体查询

写法:

写法.png 例子.png

目前rem布局中,一般将网页等分为10等分,HTML标签的字体大小为视口宽度的1/10

- flexible

作用 :使用flexible.js配合rem实习在不同宽度设备中网页元素尺寸等比缩放,也就是引入文件后,移动端页面会随着设备宽度变大而变大

flexible文件.png 需要flexible.js文件的小伙伴可以私信我!