rem移动端适配屏幕
-
rem(font size of the root element)是指相对于根元素()的字体大小的单位。简单的说它就是一个相对单位。
-
em(font size of the element)是指相对于自身的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
适配屏幕方法: -
css方式
使用媒体查询方式,由于现在手机屏幕多种多样,代码量多,并且也不能左到很好的匹配 -
js方式
使用flexible.js插件的方式 -
viewport方式
最好的方式是使用 viewport视图窗口,目前也在广泛使用
1.设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
2.在dom ready以后,通过以下代码设置html的font-size:
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px'; // 6.4是根据设计稿/100 算出来的 具体值由设计稿定
- vw方式
//750px设计稿
html{
font-size: 13.3333vw; //(100px/750px)*100vw
}
未完待续。。。