移动端..

Web Appp 屏幕适配方法有很多，比如流式布局，限死高度，响应式等方法；我认为rem为最佳的解决方案，它可以以最小的代价适配所有的屏幕

不得不说一下viewport：只有明白了viewport的概念以及meta标签的使用，才能使网页适配。

关于三个viewport（视口）理论

布局视口 默认的viewport：为什么body的宽度是980px？980为移动端的布局视口。        

对于移动设备而言：布局视口 为设备屏幕上用来显示网页的区域，早期浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大。它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，移动设备上的布局视口都是要大于浏览器可视区域的（iphone,ipad,android,chrome均为980px）

视觉视口：物理屏幕的可视区域，同样尺寸的屏幕，像素密度大的设备，物理像素会更多。比如iphone6：750*1334

理想视口：分辨率

dip & 分辨率：移动端的分分辨率就是理想视口，比如MBP的布局视口是：2880 * 1800。当设置屏幕分辨率为 1920 * 1200 的时候，理想视口是1920像素，设备像素比是1.5(2880/1920)。而移动端手机屏幕通常不可以设置分辨率，比如iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x(Retina)

逻辑像素宽度*倍率 = 物理像素宽度；

 

所以，css中的1px并不等于设备的1px，现在就可以解释为什么移动端css里面写了1px, 实际看起来比1px粗。以iPhone6为例：meta设置了viewport的宽度等于理想视口为375px，新设的viewport能填充满屏幕宽，但它的设置和屏幕物理分辨率750px是不相同的。 此时css里写的1px长度映射到物理像素上就有2px那么长。

现在提供一个常用的解决方案：用小数来写px值，利用window里的devicePixelRatio属性

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
总结：

利用meta标签对viewport进行控制：移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport理想视口 375。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

width属性被用来控制布局视口的宽度，width=device-width 也就是将viewport的宽度设置为理想视口的宽度。网页缩放比例为100%时，一个CSS像素就对应一个分辨率像素(iphone6:375px)
initial-scale=1 表示将布局视口的宽度设置为理想视口(分辩率)的宽度
user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes
rem布局

rem是指根元素（root element html）的字体大小，我们知道 em 的计算是基于父级元素的，计算起来复杂很不方便。所以 rem 的出现使得我们不用再担心父级元素的 font-size 了，因为它始终是基于根元素（html）的。

核心思想：根据html（根元素）的 font-size 大小通过媒体查询的方式来调整字号达到适配屏幕

1 首先设置html的font-size:100px；100px方便后面的计算

2 通过媒体查询的方式来调整字号