web移动端适配方案

web移动端经常使用解决方案：

1、经过js+rem，这里有一个解决方案（http://imochen.github.io/hotcss/）

1.一、rem兼容性（https://caniuse.com）

ios：6.1系统以上

android：2.1系统以上

1.二、什么是rem的

rem其实就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置。如今大部分浏览器默认font-size:16px。若是一个p标签想要设置font-size为12px，用rem做单位则变成了font-size:0.75rem（12/16=0.75）。根据这个原理，将rem运用到布局，则能够实现不一样分辨率的适配。

1.三、rem基准值计算

实际开发中，咱们不可能将默认font-size大小做为基准值，这个基准值应该是是根据ui设计稿获取的。若是ui以iphone6（375px）的分辨率为设计基准，设计图的分辨率就为750px（dpr为2），那么咱们能够以375/10=37.5为基准（也能够不除已10，这里只是为了避免让font-size值太大）。

1.四、动态计算font-size的值

方法1、利用css媒体查询

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {

      html {

　　　　font-size: 37.5px;

　　}

}

方法2、js计算

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

 

1.五、rem适配进阶

当ui使用ipone6（375px）做为设计基准，完成的设计图分辨率双倍的缘由是iphone6属于高清屏，设备像素比(device pixel ratio)dpr为2。

经过js的window.devicePixelRatio（这个方法在安卓上可能不许确）获取到当前设备的dpr，拿到了dpr以后就能够在viewport meta头里，取消让浏览器自动缩放页面，而本身去设置viewport的content

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

 

这样一来在开发时就能够设置font-size为设计图大小，这里iphone6设计图font-size就为75px，并且还解决了图片高清问题和1像素边框的问题

 

　　　　　　　

2、淘宝flexible方案（https://github.com/amfe/article/issues/17）。