我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。
下面这段代码，做过移动端项目的同学一定不会陌生。
假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于
像素，视口，分辨率，meta视口
相关的内容展开叙述。
要实现像素级还原，首先我们要搞清楚什么是像素。
像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。
乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。
对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？
//废话 lol ，就是给它设置宽度200px 呗，stupid question…
但要注意的一点是，这里定义的200px 并不是上面提到的设备像素。
像素分为两种：
1.CSS像素：为web开发者创造的，在CSS 和JavaScript 中使用的一个抽象的层。
2.设备像素： 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
width : 200px ; 这个声明 表示，这个宽度为200px的元素跨越了200个CSS 像素，200个css像素相当于多少个设备像素取决于屏幕和用户的缩放，
比如，在苹果的视网膜设备上，以5s为例，其像素密度是普通屏幕的两倍，那这个元素就跨越了400个设备像素。如果用户放大，那它将跨越更多的设备像素。
我们使用的时候，只是去定义它的css像素尺寸就行了，关于它用了多少设备像素，就不是我们去计算了，浏览器会进行计算的。
我们一直在使用这行代码，但是这样写有什么用 ？ 加了这个和不加这个到底有什么区别？
要解释这个问题，我们首先要了解一个概念 - 视口
在解释视口之前，我们先回顾一下CSS的基础：
css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？ 对了，是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素 宽度的100% ，本质是：
这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但，我们同样也没有给它定义宽度。因此，它占用的是它的父元素宽度的100% ;
那html 的父元素是谁呢 ？
这就是要说的 视口了。
在CSS文档中，它叫做 初始包含块。
这是百分比计算的根源，它给css布局限制了最大宽度。
在pc 浏览器中，视口的宽度 和浏览器窗口的宽度是一致的（先不管margin 和padding）,html ,body 元素的宽度都和浏览器窗口的宽度一致。
测试走起：
测试结果表明上面的叙述是对的，这不是什么开创性的发现，只是方便下面的讲述。
布局视口
小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果-------页面很丑。
手机，平板，浏览器的宽度一般在240-640像素之间，而大…大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。
如图：
一个为桌面设计的网站 在780～ 1260px 的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。如果移动端的浏览器也能展示为pc设计的网站，大家一定会很开心。
但是这是有代价的，如上图，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。
这样用户就只有通过放大，去看想看的信息。
在手机上，视口与移动端浏览器屏幕宽度不再关联，而是完全独立的了。
这个视口，叫布局视口，css布局会根据它来计算，并被它约束。
如图： 左图是在chrome 中放大之后的效果，图右是在手机中，放大后的效果，仅为说明两个视口的关系。
视觉视口
字面意思，它是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有需要看到用户正在看什么区域的需求，可以用js来获取。
理想视口
首先来解释一下这个概念
默认情况下，移动设备的布局宽度为768～1024像素，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。
简单的说，就是，布局视口的默认宽度并不是一个理想的宽度。
这就是 苹果 和其他效仿苹果的 浏览器厂商 引进理想视口的原因。
理想视口，对设备来讲，是最理想的视口尺寸。
显示在理想视口中的网站拥有最理想的宽度，不需要缩放。
但，只有当网站是手机（或者平板）的时候，才应该使用理想视口。
所以，这行代码： 就是告诉浏览器，我要使用理想视口了。
让布局视口的宽度和理想视口的宽度一样。
哦，对了，只有我们人为添加这段代码，理想视口才会生效，否则，布局视口将会维持默认宽度。
首先，什么是缩放…
从技术上讲，缩放就是放大或者缩小css像素的过程。
典型的例子就是我在手机上浏览pc端的网站，放大一点，好看清字。
但是，这个缩放会影响页面上的所有元素。
比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。
所以，缩放会影响视觉视口的尺寸。
放大会使视觉视口变得更小，我们看到的内容就越少，因为屏幕上显示的css像素更少了。
缩小则会使视觉视口变的更大，使我们看到更多的部分。因为屏幕上css像素更多了。
所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。
一个重大区别
在手机上，布局视口不会被缩放。但是在pc上会，因为它的布局视口和视觉视口大小是一样的，不可能改变一个的同时，另一个不会变。
要注意的是：移动端的缩放虽然不会导致css布局被重新计算，但是频繁的操作会给cpu比较大的负担，耗电快，因此不重新布局对性能有很大好处。
最小缩放 和最大缩放
initial-scale=1,maximum-scale=1"如果允许缩放，那用户可以缩放到什么程度呢 ？
在手机上是5个因子， 换句话说就是20% － 500%。
但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;
我们可以通过: 来禁止用户缩放。
分辨率有两个含义。
1.设备每英寸的点的个数。
2.CSS 和 JavaScript 中也有分辨率的概念，不过他们并不是一回事。
物理分辨率dpi
所有的屏幕都有物理分辨率，衡量单位为DPI ,（dots per inch）.DPI 越大，画面越清晰。
另外要注意的一点，web开发者不可能知道物理分辨率，因为没法获取这个信息。有些手机通过screen.width暴露设备像素个数，但这在不同浏览器之间是不可靠的。无论如何JavaScript 都无法获取设备的物理尺寸。
设备像素比 dpr
JavaScript 中，有个属性，window.devicePixelRatio ，CSS也有device-pixel-ratio 和分辨率的媒体查询，但是它们都是和物理分辨率无关的。
取而代之的是，他们提供了设备像素个数和理想视口的比，成为设备像素比，device pixel ratio,简称DPR。
官方文档的描述如下：
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips。
dips:device-independent pixels设备独立像素，就是独立于设备之外的像素，也就是css像素。
比如：5s的物理像素为640px, CSS像素为320px,那 pdr = 640/320 = 2.
DPR不一定是整数,比如BlackBerry Z10 的宽度是768px 物理像素；CSS像素为342px,因此，它的dpr 大约为 2.25.
meta 视口标签 存在的目的 主要是 让布局视口的尺寸和理想视口的尺寸匹配。
Apple 发明了这个标签，其他的厂商复制了它的大部分内容。
meta 标签应该被放在中，并按以下格式书写：
每一个名/值 都是一个给浏览器的指令，以逗号分隔，常用的有5个：
width设置布局视口的宽度，为一个正整数
initial-scale设置页面的初始缩放程度 和布局视口的宽度
minimum-scale允许用户的最小缩放程度，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
在safari中，当设置initial-scale= 1 时，理想视口的尺寸会随着屏幕的旋转改变。在竖屏时，布局视口的宽度是320px ,横屏下，是480px 或者568px.
但在ie10中却有完全相反的问题：
initial-scale = 1 时，在横屏模式下宽度也保持为320px ,但width = device-width 时，它会从320px变为480px.
所以为了在所有浏览器上解决类似的问题，我们需要如下写法：
字体和尺寸
有了上面的理论基础，我们就能愉快的处理移动端尺寸的问题了。
移动端的尺寸，主要是间距，宽高，字体，和图像 的尺寸。由于移动设备千差万别，如何才能保证效果呢？
来看一下淘宝： 要注意的有三点：
html 头部meat标签中的DPR
width,height 的 rem
3.font-size 的 px ;
rem：font size of the root element，那么rem是个单位，单位大小由根元素font-size的大小决定。
关于动态修改font-size,具体的做法，可以参考这篇文章 ,这里不再赘述。
解决移动端尺寸问题的关键就是根元素的尺寸问题。
现在普遍的做法是动态修改根元素的font-size,这样rem 会随着设备的变化有着不同的参考值，那尺寸问题就迎刃而解了。
除了使用rem,另一种做法是使用媒体查询来解决适配问题，这里暂时就不讨论了。
还有一个是字体的问题，用一幅图表达就是： 字体的问题说大不大，说小也不小，关乎到用户体验，马虎不得。
在字体的设置上，不推荐使用rem。
我的做法是根据DPR 设置字体。
当然，在开发的时候，我们不用手动去做这件事，可以借助gulp插件来解决。如果不想用gulp，也可以使用scss 来解决。
我简单定义了一下字体的mixin,基本能用，也给大家看看吧，欢迎拍砖。
也可以这样：
可以这样用：
生成的代码：
也可以看看这篇文章了解webapp 中有关字体的更多信息。
ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？
大家可能会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载.
