精通移动端布局 - 概念篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选，提炼出来，本来我也想用我匮乏的语言来描述，可是发现别人已经总结的更好了，因此...我仍是乖乖的站在巨人的肩膀上吧~~

---

完整目录：

基本概念
    物理像素
    设备独立像素
    CSS 像素
    PPI的概念
    DPR的概念
    缩放的概念
    viewPort 的概念
    viewport 渲染流程
    Meta 标签说明

移动端布局实践
    混合方式
    REM 方式
        响应式
        JS自动换算
    缩放方式
        CSS3 缩放
        viewport 缩放

相关补充
    为何须要meta标签？
    传统响应式布局与移动端响应式的区别
    移动端字体以及大小的设置
    移动端背景图缩放设置
    使用Sass提升px与rem转换效率
    经过Chrome进行真机调试
    weinre 远程调试

---

基本概念

物理像素

物理像素又叫“设备像素”，他是显示设备中最微小的物理部件，每一个像素能够根据操做系统设置本身的颜色和亮度，正是这些微小距离欺骗咱们的眼睛从而看到图像效果。
物理像素也是厂商在出厂时就设置好了的————即一个设备的分辨率是固定不变的。

设备独立像素

也叫“密度无关像素”，能够认为是计算机坐标系统中的一个点，这个点表明一个可由程序使用的虚拟像素（好比CSS像素），而后由相关系统转换为物理像素。

CSS 像素

CSS像素是一个抽象单位，主要使用在浏览器上，用来精确度量（浏览器层面而言）WEB页面上的内容，通常来讲CSS像素也被称之为设备无关像素(device - independent pixel) 简称DIPS。
在不一样的屏幕上，CSS像素所呈现的物理尺寸实质上都是同样的，而不一样的是CSS像素与所对应的物理像素具数是不一致的，在普通屏幕下，1个css像素对应的就是1个物理像素，而 retina 屏幕下，1个 css 像素对应的倒是多个物理像素。这一点在移动端上会更加的明显，而在100%缩放模式下PC端上，咱们就能够认为 1物理像素就等于1css像素。

总的来讲，物理像素是设备在物理层面上不可再分割的最小单元，而“设备独立像素”则是一个统称的概念，它主要指的是应用软件在应用层面上如何度量内容，能够这么说，CSS像素就是设备独立像素中的一种，是WEB浏览器主要采用的度量单位。

PPI的概念

PPI 就是屏幕密度，它是指显示设备上每英寸（1英寸约等于2.54厘米）长度内存在的像素数量，单位即PPI。

其换算公式以下：

PPI最直观的的效果能够参考下图：

按照苹果公司的技术营销宣传，在 320PPI 以上的屏幕均可以被称之为retina屏幕。

DPR的概念

DPR 即是 device Pixel Ratio 的简称，即设备像素比，它反映了设备上的物理像素与设备独立像素对应关系，也就是说 DPR 可让咱们知道当前设备下逻辑像素与物理像素的对应状况。
它的值能够按照下面的公式计算出来:

设备像素比 = 物理像素 / 设备独立像素

在JavaScript中咱们能够直接经过如下window上的属性获取设备像素比

window.devicePixelRatio

而在CSS中，能够经过如下属性得到:

-webkit-device-pixel-ratio;
-webkit-min-device-pixel-ratio;
-webkit-max-device-pixel-ratio;

缩放的概念

在说缩放以前，咱们先定义一个略微严格的规定：

100% 缩放状况下：1css像素 == 1物理像素

带着这个定义咱们来看页面在浏览器中的缩放状况：
首先咱们假若有一个2px * 2px 宽高的盒子。根据定义在100%缩放状况下 2px * 2px 是彻底等同于 2px * 2px的物理像素。
若是如今去缩放浏览器，咱们会发现2px*2px的尺寸会随着缩放而发生变化。实际上现代浏览器的缩放功能就是经过拉伸像素的方式实现的。而这种拉伸像素的方式也更可以让咱们清晰了解独立像素与物理像素之间的差别。
首先，咱们能够很明确的知道，浏览器无论怎么拉伸像素它也不可能改变物理层面上的像素(物理像素)，因此它能也只可以改变本身的逻辑像素 - CSS像素，在放大的状况下 1css像素 会占据多个物理像素，从而在应用层面上使显示区域宽度变小，浏览器为了可以显示完整的内容从而出现滚动条，而缩小的状况下，多个css像素会被合并在一个1个物理像素中去显示。可是这种方式其实是一种有损的过程，由于用1个物理像素去表示多个CSS像素，会致使内容丢失更多的细节。正是由于css像素的丢失，才致使内容变的更小。
更直观的了解能够看下图：
100%模式下 1css像素就等于 1物理像素

在放大的状况下，1css像素会占据多个物理像素

在缩小的状况下，多个css像素会被合并在物理像素中

viewPort 的概念

桌面环境下 viewport
viewport 实际上在桌面浏览器中就已经存在，让咱们回忆下一下，若是如今页面上有一个空的 div ，其宽度默认是100%，那么这个100%的宽度是怎么产生的呢？咱们能够知道它是继承其父元素 body，而body的宽度又是继承其父元素 html。因此 body 元素和它的父元素 html 同样宽。

那么 html 元素的宽度是多少？它的宽度和浏览器窗口宽度同样。你可能不知道的是这个行为在理论上是如何工做的。理论上， html 元素的宽度是被viewport的宽度所限制的。 html 元素使用viewport宽度的100%。
在桌面环境下，viewport 实际上就等于浏览器窗口，拥有浏览器窗口的宽度和高度，但viewport并非一个HTML结构，因此你不能用CSS来改变它。

在桌面环境下咱们能够很容易的理解viewport，可是在移动浏览器环境下它会有一些复杂。

手机端 viewport
在手机端上viewport相似于一个虚拟的视口，一般状况下这个虚拟的视口要比设备屏幕宽。
将网页放入到虚拟的视口(viewport)中去显示，是为了解决太小的屏幕在显示过大的网页（如专为桌面浏览器设计的网页）时，致使出现滚动条从而影响在移动设备上的浏览体验，但同时也会致使页面总体布局的缩小，文字不清晰，连接不方便点击等问题，并且viewport也会破坏专门针对手机浏览器设计的网页布局。
因此在对于专门为手机端制做的网页，建议将viewport设置以下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

若按照PPK大神的理论，可将viewport分为三种，而前文咱们所说的用来显示页面的viewport，咱们称之为 layout viewport，即布局 viewport，layout viewport 随着浏览器厂商的不一样，其默认的尺寸也不尽相同，但经常使用的有 980px 1024px 等，除了layout viewport，还有 visual viewport，即视觉viewport，也就是咱们设备屏幕的物理尺寸，它也是物理实际存在的，例如：iphone5 是 320 * 568 。
若就嵌套关系来讲 layout viewport 是嵌入在 visual viewport 中的，具体关系能够参照下图：

如今咱们已经有两个viewport了：layout viewport 和 visual viewport。但开发者以为还不够，由于如今愈来愈多的网站都会为移动设备进行单独的设计，因此必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是：

· 首先不须要用户缩放和横向滚动条就能正常的查看网站的全部内容；
· 其次显示的内容大小是合适的。

好比一段14px大小的文字，不会由于在一个高密度像素的屏幕里显示得过小而没法看清，理想的状况是这段14px的文字不管是在何种密度屏幕，何种分辨率下，显示出来的大小都是差很少的。固然，不仅是文字，其余元素像图片什么的也是这个道理。ppk把这个viewport叫作 ideal viewport，也就是第三个viewport——移动设备的理想 viewport。
ideal viewport 并无一个固定的尺寸，不一样的设备拥有有不一样的 ideal viewport。
但通常来讲，ideal vieport 就等于 visual viewport。

viewport 渲染流程

不确保正确，但如下内容至少是我对一个页面在被载入到手机浏览器中渲染过程的猜测。
示例手机：

分辨率：1920*1080
屏幕尺寸:640 * 360
设备像素比: 3

示例站点：
12306，年关将至想必也是你们比较常上一个网站

内容：
layout viewport在渲染页面以前，会根据自身的宽度（默认或者meta指定）来设定CSS像素与 物理像素的占比。经过占比来决定内容的缩放程度，而这个缩放值，则是由 visual viewport 与 layout viewport决定的，其换算公式以下：

scale = layout viewport / visual viewport

在正常状况下比较好理解，就如我手机分辨率宽度是1080来算，此时 我默认的viewport是980，如今基本上就是1css像素 == 1物理像素，但由于 PPI 的缘由，单位物理像素要更加的小，因此总体页面被缩小的形式显示在个人手机屏幕中，并且，12306默认的宽度是960，因此这960相对于我viewpot还剩有20px的左右边距。由于个人物理像素是大于vieport默认的尺寸的，因此逻辑像素并无缺省，可是若是在比较老的iphone5上面，其实际分辨率是 640*1136，而viewport也默认为980，实际上在展现页面的时候逻辑像素会超出物理像素300多，所以逻辑像素有缺省，整个页面是以一种牺牲部分细节有损的方式去展现的。

若是我指定了viewport的宽度为 width = device-width 。那么此时 1css像素 == DPR * 物理像素，同时这个值也是当前的缩放值。可是我若指定了 initial-scale = 1 时，则强制了 css像素 与 物理像素为1:1的对比关系。

这些还都是简单的渲染流程，若是涉及到缩放，实际上手机端在去渲染网页时，其状况可能会更加的复杂，并且，不一样的手机厂商，不一样的浏览器厂商，其实现的方式都是有差别的，若是想制定一套统一的标准去试图阐述移动端网页渲染流程，我我的认为实际上也是没有意义的。咱们只须要知道大体常规的渲染流程，就能够更好的帮助咱们进行移动端的网页开发。

Meta 标签说明

meta标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证实这个东西仍是很是有用。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，以下：

Attribute	Value	Description
width	num	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	num	设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale	num	容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale	num	容许用户的最大缩放值，为一个数字，能够带小数
height	num	设置layout viewport 的高度，这个属性对咱们并不重要，不多使用
user-scalable	str	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

这些属性能够同时使用，也能够单独使用或混合使用，多个属性同时使用时用逗号隔开就好了。
此外，在安卓中还支持 target-densitydpi 这个私有属性，它表示目标设备的密度等级，能够自动设定css中的1px表明多少物理像素，开发者无需考虑换算的过程
target-densitydpi　值能够为一个数值或 high-dpi 、medium-dpi、low-dpi、device-dpi 这几个字符串中的一个，特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

由于这个属性只有安卓支持，而且安卓已经决定要废弃target-densitydpi 这个属性了，因此这个属性咱们要避免进行使用 。

---

参考连接：
http://blog.csdn.net/aiolos1111/article/details/51967744
http://www.cnblogs.com/Mrs-cc/p/5329545.html
http://www.cnblogs.com/2050/p/3877280.html

下一篇：精通移动端布局 - 实践篇 - 【准备中】....