1.手机适配协作模式
转载自：https://github.com/amfe/article/issues/17
2.几个基本概念
1.视窗viewport
visual viewport虚拟视窗
layout viewport布局视窗——比虚拟视窗大，可理解为，不改变大小或形状的大图像
2.像素换算
物理像素(physical pixel)：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
根据下面荧光背景的公式，而且ip6的dpr为2，可以算出ip6的物理像素是：750pt*1334pt
设备独立像素（density-independent pixel）:与屏幕密度有关，可以辅助区分视网膜设备（retina）和非视网膜设备：如ip6的宽高：375pt*667pt就是设备独立像素
css像素：CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
屏幕密度：指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。
设备像素比（device pixel ratio）（dpr）
设备像素比=物理像素/设备独立像素
JS中用window.devicePixelRatio获取dpr
而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，导致每个像素点实际上有4倍的普通像素点，如图所示：
出处：http://www.w3cplus.com/css/towards-retina-web.html
在普通屏幕上1css像素对应1个物理像素
而在retina屏幕下（视网膜屏幕），1个css像素对应4个物理像素
而ip6是retina屏幕，所以ip6的物理像素是设备独立像素各乘以2
http://www.w3cplus.com/css/towards-retina-web.html
详解retina屏幕如何解决图片适配问题
3.meta标签
<meta>标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。
留个悬念，因为后面的解决方案中需要重度依赖meta标签
4.CSS单位rem
简单的理解，rem就是相对于根元素<html>的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据<html>的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
2154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
