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）头部信息设置：虚拟窗口；模仿实际的窗口；还有个缩放；
<meta charset="UTF-8" name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
（2）js部分设置：
<script>
//适应移动设备和pc设备屏幕的文档默认字体设置;
var dpr = window.devicePixelRatio;
document.documentElement.style.fontSize = dpr*window.innerWidth / 10 + 'px'; var meta = document.querySelector('meta');
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', ' +
'maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
</script>
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代码如下：
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height">
<title>啃先生的网</title>
<script type="text/javascript">
var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);
function setPxPerRem(){
var dpr = 1;
//把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
var pxPerRem = document.documentElement.clientWidth * dpr / 10;
cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxPerRem();
</script></head><body>
</body></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）
网友评论