移动端自适应

一、像素

设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。

css像素：这是一个抽象的像素概念，它是为web开发者创造的。

记住：当你给元素设置了 200px 时，这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素，至于会跨越多少个设备像素，就取决于手机屏幕的特性和用户的缩放了,举个栗子：

苹果手机的视网膜屏幕，是一个高密度屏幕，它的像素密度是普通屏幕的2倍，所以当我们设置 200px; 时，200个CSS像素跨越了400个设备像素。

如果用户缩小页面，那么一个CSS像素会明显小于一个设备像素，这个时候 200px; 这条样式中所设置的200个CSS像素跨越不了200个设备像素。

二、移动端的viewport

viewport是html的父元素

布局viewport：document.documentElement.clientWidth

视觉viewport：设备屏幕大小

设备像素比dpr：设备像素个数 / 视觉viewport的CSS像素个数 （公式成立的大前提：缩放比例为1）

理解<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width　　布局viewport宽度 = 视觉viewport宽度；

initial-scale=1.0　　  页面初始缩放程度为1；

minimum-scale=1.0　　　 页面最小缩放程度为1；

maximum-scale=1.0    页面最大缩放程度为1；

user-scalable=no　　　　是否允许用户对页面进行缩放操作；

三、页面自适应方案

1、手淘方案

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

动态设置页面初始缩放程度让 布局viewport = 设备像素；

设置根元素font-size为布局viewport宽度的十分之一，至于为什么是十分之一看过一个说法 ：使100vw = 10rem，方便计算；

宽度（基于psd）用rem；（不好算）

2、网易方案

以iphone6的psd宽度为750px为标准：

前提<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">；

规定psd的根元素font-size：100px，则实际页面根元素font-size：50px；

开发时测量psd尺寸除以100得到rem尺寸；

动态改变实际页面根元素font-size，无论在什么设备下，页面的总宽度都是7.5rem；

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

四、文字自适应

文字大小建议不要换算成rem，而是使用媒体查询来进行动态设置；

参考网易的代码片段：

@media screen and (max- 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min- 321px) and (max-400px) {
    body {
        font-size:17px
    }
}

@media screen and (min- 400px) {
    body {
        font-size:19px
    }
}

具体文字大小要多少个像素以设计图为准，但是这三个等级之间是有规律的；仔细观察发现，321px以下的屏幕字体大小比321px - 400px之间的屏幕字体大小要小一个像素，而321px - 400px之间的屏幕字体大小要比400以上屏幕字体大小要小2个像素。依照这个规律，我们根据设计图所在的像素区段先写好该区段的字体大小，然后分别写出另外两个区段的字体大小媒体查询代码就可以了。

详解见：https://blog.csdn.net/u013778905/article/details/70768958