移动端适配的解决方案
1.rem + less +媒体查询
2.flexible.js + less +rem
rem布局适配
为什么用rem?
因为rem只根据html的字体大小有关,所以只要在不同的屏幕下,只要更改html的字体大小,就可以控制1rem = 多少,将盒子的高宽等 用px的地方都改为rem, 达到改变html字体大小从而改变整个页面的大小,达到适配效果。
如何使用rem?
rem是根据一个html字体大小为单位 比如我们设置了一个html字体大小为16px 那么1rem就是16px 2rem 就是32px
语法
媒体查询
媒体查询( Media Query )是CSS3新语法,可以针对不同的屏幕尺寸、媒体类型设置不同的样式,重置浏览器大小的过程中,会根据浏览器的宽高重新渲染,目前很多苹果手机、安卓手机、平板等设备都用得到多媒体查询。
px rem em vw vh 的区别
px
px,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,