移动端是如何做适配的?

常用的解决移动端布局的方案大概有：

1.flex弹性布局

1）高度定死，宽度自适应，元素都采用px做单位。

2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

2.百分比

3.用框架搭建页面

4.viewport适配

4.1 优点：

1）避免复杂的计算，直接使用UI的标准像素值

4.2 缺点：

2）不能使用meta标签 图片失真情况很严重

5.媒体查询media

6.rem+viewport缩放（也成为1px适配）

1）根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

5.1优点：

1）media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

2）图片便于修改，只需修改css文件

3）调整屏幕宽度的时候不用刷新页面即可响应式展示

5.2 缺点：

1）代码量比较大，维护不方便

2）为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源

3）为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

6.rem+less（sass）适配

1）viewport也是固定的

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

2）通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

3）css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;

flex布局

父级元素设置display：flex

子级元素通过flex参数来设置缩放比例，缩放条件、排列方式等

缺点：具有兼容性问题

rem布局

这里提供两种思路：

思路1

1）设置根节点字体大小为（为了方便，可以灵活设置：16、32、100等），布局时使用原px/@rem得出rem的值；

2）只需要在js中计算当前设备的clientwidth，然后用clientwidth/16（为font-size字体大小=1rem）–这里表示16rem为设备大小，即将设备看均分成1份

3）假设我们使用750px的设计稿，

举例：

  (function () {
    var styleNode = document.createElement("style");
    /* 当不除以16时此时1em便占据视口宽度,
    那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
    // var w = document.documentElement.clientWidth;
    /* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
    var w = document.documentElement.clientWidth / 16;//获取视口大小
    /* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/
    styleNode.innerHTML = "html{font-size:" + w + "px!important}";