移动端适配屏幕-rem

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
}

未完待续。。。