h5 手机屏幕适配—REM

一、rem、em和px之间的关系

    使用rem之前，先得弄清楚rem、em和px之间的关系，特别是每一个单位的使用跟代码块的继承之间的关系：

单位	代码地址	运行后截图	说明
px	https://coding.net/u/Jill/p/dankal-jill/git/blob/master/rem/px.html		字体恒定没有变化
em	https://coding.net/u/Jill/p/dankal-jill/git/blob/master/rem/em.html		字体大小依次在减小
rem	https://coding.net/u/Jill/p/dankal-jill/git/blob/master/rem/rem.html		单位em字体大小是相对直接或者是最近的父级，但单位rem的大小则是相对于html(根元素)字体大小

    
    通过对比会发现：只是单位使用不一样但效果却是截然不同的。rem和em都是相对单位，px则不是

    在CSS样式表中，单位em是作为字体高度的单位来使用的，但实际字体大小的高度显示是用户对DPI的定义来决定的。为了改善这种样式规则，单位rem则是直接取决于文档根元素字体默认大小，也可以理解为root em，跟em有所不同的是使用rem单位的字体大小在整个文档中都是恒定不变的

---

二、初识rem

    rem 的官方定义：The font size of the root element，即以根节点的字体大小作为基准值进行长度计算。

    rem的兼容性：
    

    
通过上图可见：

• 大部分主流浏览器支持，但要注意IE9、IE10
• iOS：6.1系统以上都支持
• Android：2.1系统以上都支持

---

三、rem 为解决什么问题而存在

    先不谈安卓，就以iphone各种手机的尺寸来说，iPhone4,5 宽度320px，iPhone6 375px，iPhone6 plus 414px. iPad 768px。如果一个按钮，固定一个75x25的尺寸，那么就必然会导致在不同尺寸下的相对大小不一样。这带来的问题就在于会直接影响到设计的美观，可能在iPhone6下，一个完美的设计图，到了iPhone5,就变得low很多。为了让页面元素的尺寸能够在设备宽度变化的时候也跟着变化，rem就出现了。

    使用rem适配的原理就是我们只需要在设备宽度大小变化的时候，调整html的字体大小，那么页面上所有使用rem单位的元素都会相应的变化。 这也是rem与px最大的区别。

---

四、利用meta标签对viewport进行控制

    在讲述rem布局之前得先搞明白的就是移动设备上的viewport，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

1、viewport的概念

    通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，即浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
    下图列出了一些设备上浏览器默认的viewport宽度。
    

2、css中的1px并不等于设备的1px

    css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
    在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：

window.devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
window.devicePixelRatio = physical pixels / dips

设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。
    需要注意的是，devicePixelRatio存在兼容性问题，具体可以查看PPK made some research on devicePixelRatio
    
拓展：PPK的关于三个viewport的理论
    ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

类别	简述	说明	图例
layout viewport	浏览器默认的viewport	layout viewport 的宽度是大于浏览器可视区域的宽度的
visual viewport	浏览器可视区域的大小	在Android 2, Oprea mini 和 UC 8中无法正确获取
ideal viewport	移动设备的理想viewport	理想适配指的是：1、不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；2、显示的文字的大小是合适，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素如图片等也如此

    

文章链接
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport

3、利用meta标签对viewport进行控制

在苹果的规范中，meta viewport 有6个指令，［可以同时使用，也可以单独使用或混合使用，多个指令同时使用时用逗号隔开］如下：

指令	说明
width	设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

    
    要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分[下图所示］，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就initial-scale=1解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：