移动端web适配

移动端web适配我了解的总共有4种方法：

• 固定宽度
  定死页面宽度，直接写一个div把宽度订到设计稿的宽度或者你需要的宽度，然后让它居中，再在这个div盒子里进行你的页面开发，这种开发的缺点就是当遇到较大的屏幕时，屏幕的两边会流出白边，影响美观，体验不好。

• 宽度百分比

• 使用媒体查询
  但媒体查询一般是针对几种主流分辨率进行定制，用户体验也不能说有多好，毕竟在一些分辨率变换的瞬间，布局会突然性地变化。

• rem+viewport
  通过采用rem单位的动态计算的弹性布局。这里详细介绍一下：

首先在做移动端开发的时候一定会加上viewport：

<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>

• name=”viewport”是来告诉浏览器这个meta属性是设置设备视口的
• content=”“是设置视口的具体内容
• width=device-width这段代码告诉浏览器，页面的宽度就等当前设备的视口宽度，
• initial-scale=1,代表初始的页面缩放比例为1，
• minimum-scale=1代表缩放的最小比例为1,
• maximum-scale=1代表缩放的最大比例为1
• user-scalable=no代表不允许用户进行手动缩放。

但是会有如Retina屏这种高清屏幕的出现，他会把画布的大小放大到原来的2倍，也就是说现在我写的css里的1px在屏幕上展示的是2px的宽度。

为了在屏幕上仍显示1px的边框，就只能对页面进行缩小，即缩放比例设为0.5：

<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>

这里有一个新名词：缩放比，js可以通过window.devicePixelRatio来获得。比如上面提到的Retina屏幕的dpr就是2，那么我们的缩放比例设为1/2。因此我们就要动态获取设备的dpr，并设置meta：

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

解决完像素显示的问题，接下来就是使用rem来进行布局。
rem是根元素的字体大小，其他所有的布局尺寸都使用rem来布局。

比如我们现在设定html元素的font-size为16px：

html{    font-size:16px;}

那么此时1rem = 16px。其他需要适配的元素的宽高都使用rem来定义：

#element{    width:10rem;    height:10rem;}

那么此时element的宽高都是160px，这就实现了根据rem来配置元素的大小。

那么如何实现适配呢？
由于所有元素及字体的大小都是由rem决定的，那我们就要根据屏幕宽度来设定rem大小，这样页面就随屏幕宽度来适配了。

一般我们都先以一个确定的屏幕来作为参考，比如我们拿到的设计稿宽度为375px，这是iphone6的屏幕宽度。此时我们设定一个rem的基准值，比如宽度/10:

rem = window.innerWidth/10;

此时rem基准值为37.5px。
如果设计稿中一个元素的大小为90px，那我们就需要做一个转换，90px转换为多少rem？

90/37.5 rem

此时我们就要设定这个元素的大小为90/37.5 rem。

因此这个计算过程就是：

• 根据页面宽度计算出rem的基准值
• 计算出其他元素的rem大小

一般我们可以使用sass来完成px转换到rem的这个过程：

@function px2rem($px){    $rem : 37.5px;    @return ($px/$rem) +rem;}

这样，当我们写具体数值的时候就可以写成：

#element{    height: px2rem(90px);    width: px2rem(90px);}

对于没有使用sass的工程，可以将html的font-size设置为100px，这样在写单位时直接将px大小除以100即可。

根据标准的375px的设计稿，我们已经完成了px到rem的转换，那么相对于其他屏幕的适配也都已经完成的。rem为屏幕宽度/10，而所有元素大小又是以rem标注的，这样就实现了对于不同屏幕宽度的适配。

那么针对不同的屏幕我们是怎么动态的设置rem大小的呢？一般有两种办法：

• 媒体查询

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){      html{font-size: 37.5px;}}

• js动态设置

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

在使用js来设置时，需要绑定页面的resize事件来达到变化时更新html的font-size。

总结一下根据rem适配的步骤：

• 根据设计稿设定rem的基准值，并设定好各个元素的rem大小（px to rem）
• js根据屏幕宽度动态设置rem大小，这一过程一般绑定resize事件

因此，rem布局这种方式需要在头部嵌一段脚本来监听屏幕分辨率的变化，从而动态改变根元素字体大小。这样的方式使得css与js耦合在了一起。

• 使用vw、vh进行布局
  100vw是视口宽度，100vh为视口高度。

我们可以使用vw作为唯一的css单位。
1.对于设计稿的尺寸转换为vw单位，可以使用Sass编译。

//iPhone 6尺寸作为设计稿基准$vw_base:375;@function 2vw($px){    @return ($px/$vw_base)*100vw;}

2.将文本、布局等尺寸改用vw作为单位：

html{    font-size:2vw(10px);}div{    width: vm(40); // 宽度    height: vm(40); // 高度   }

最后可以针对高清屏的一些边框要显示1px的需求，使用 transform 属性 scale 实现

.box{    @media only screen and (-webkit-min-device-pixel-ratio: 2) {            -webkit-transform: scaleY(0.5);            -webkit-transform-origin: 50% 0%;        }}

这样的页面虽然看起来适配得很好，但是你会发现由于它是利用视口单位实现的布局，依赖于视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。

因此可以考虑rem与vw结合的方式：
1. 给根元素字体大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
2. 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度

$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值$vm_design: 750;html {    //根据视口宽度动态设置根元素font-size大小    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;     // 同时，通过Media Queries 限制根元素最大最小值    @media screen and (max-width: 320px) {        font-size: 64px;    }    @media screen and (min-width: 540px) {        font-size: 108px;    }}//根据设计稿，将所有尺寸单位转换为vw的函数@function rem($px) {     @return ($px / $vm_fontsize ) * 1rem;}

参考文章
纯CSS3使用vw和vh视口单位实现自适应