web多屏适配

web屏幕适配（一）：https://segmentfault.com/a/1190000004524243
web屏幕适配（二）：https://segmentfault.com/a/1190000004538413
前端乱炖：http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

核心：

一、利用rem来处理尺寸（width、height、margin、padding等）。
二、物理像素border的实现，viewport、物理像素、css像素概念。
三、vw、vh、vmin、vmax、% （vw不兼容安卓4.3以下浏览器）。
四、一物理像素border实现两种方法：
（1）整个页面缩放，viewport 设置 scale
（2）单个元素缩放，transform scale
五、术语概念：

* 物理像素：买手机的时候会有一个 nm 的分辨率，那是屏幕的nm个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度

* CSS像素：就是CSS里的Px，上面已经讲了是viewport中的一个小方格。

* 

像素密度：即dpi或ppi，屏幕每英寸所占的物理像素点。

dpi：设备像素比。

viewport：屏幕的视口宽高，在css中，1px是指viewport中的一个小方格，而viewport的宽度是可以任意设置的。有两个，一个实际窗口，一个虚拟窗口。
* device-width：设备宽度。

而CSS像素与物理像素之间是有一个转换关系的。即是：
六、device-width：device-width的宽度值单位是CSS像素。
当viewport设置为device-width时，此时它是手机横向分辨率 / 转换系数。即：

七、viewport设置：

---

（1）头部信息设置：虚拟窗口；模仿实际的窗口；还有个缩放；

---

（2）js部分设置：

---

1.移动端适配的是什么？
我们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。
说白了就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。

结论：明白了，所以padding，margin，图片等的大小基本都要做适配

2.那有什么方法可以做到这种适配？
关键要找到一种长度单位，使得一样的取值，在不同尺寸的屏幕上的大小按比例缩放。
1.网页在viewport中布局，viewport被分成一个个小方块，一个CSS像素占一个方块；
2.在设置了viewport宽度等于设备宽度的情况下，通过某种算法，在不同大小的屏幕上，1个CSS像素所占屏幕的物理尺寸是一样大的既然1个CSS像素在不同屏幕上物理尺寸一样大，那px肯定不能做为适配的方法了 ；
结论：
（1）长度单位rem是相对于html标签的font-size来计算的。例如html标签设置font-size:36px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=36px*1.2=43.2px
（2）奥秘就在于结合px的固定尺寸和rem的相对尺寸！

3.适配具体执行方案（阿里flexible）：

1. 设置viewport为设备宽度（这里不一定，但目前先这样足矣）；

2. 将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）；

3. 写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem；

JS和Html代码如下：

CSS代码做了类似如下的修改：

运行结果如下：边距和头像图片都随屏幕变化而变化了260400的屏幕、 380400的屏幕；

对精益求精的项目，有以下问题：
1.图1的屏幕的尺寸较小，因此头像应该小些，话题左边的空白也应该小一些。
2.图片应该保持正方形，而且两张图之间的边距应该随屏幕变化而变化
结论：所以padding，margin，图片等的大小基本都要做适配

4.px与rem之间的单位换算 例如：
现有设计师提供宽度为400px的设计稿，其中某个图片的宽度设计为20px，那么，CSS的写法就是img{width: 0.5rem;}，怎么得出这个结果的呢？

1. 设计稿的宽度视同手机宽度，即假设有一个viewport为400px的手机

2. 将它分成10rem，每个rem为40px;

3. 

那么图片宽度20px自然就是0.5rem;

5.手动换算太麻烦怎么办：编辑器插件；
6.参考链接：
1. 使用Flexible实现手淘H5页面的终端适配（https://github.com/amfe/article/issues/17）

2. 移动端高清、多屏适配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）

3. A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）