viewport和px
---恢复内容开始---
上次面试腾讯被问到不同分辨率在不同viewport下的表现， 那时候对这个方面不太了解， 后面深入了解了一下原理， 总算思路比较清晰了
一般viewport用在移动端重构上面， 我们的页面应该按照320/640/720的适配? 还是需要每种尺寸都适配来适应不同的屏幕？
现在一般按照640的大小适配移动端， 给元素赋予固定的像素， 但是在不同的手机里面看起来差不多， 不需要另外去适配咯， 这就是viewport的作用
---------------------------------------------------------------------------------------
有几个问题需要解答：
1、绝对单位？ 相对单位？
绝对单位： cm(厘米) mm(毫米)
相对单位： px rem em
2、屏幕尺寸？ 屏幕分辨率？ 屏幕像素密度？
屏幕尺寸： 屏幕对角线的长度， 单位英寸， 常见尺寸有3.5（i4）， 4.0（i5）。。。
屏幕分辨率： 横纵向上的像素点数， 单位px， 1px=1像素点（指的是物理设备的一像素）
屏幕像素密度： 屏幕每英寸可以显示的像素点数量， 单位ppi
（盗用一个图）
3、 ppi/dpi/dp/dip/sp/px
ppi： pixel per inch 每英寸显示的像素点的数量， 屏幕像素密度
dpi： dots per inch (dpi用在计算机上就是ppi）
dp， dip： Density independent Pixels， 密度独立像素， 作用是使同样的设置在不同手机上显示的效果一样
如： 在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px， 就是说在比较大屏幕上， dpi是小手机的2被， 那px也是小手机的两倍，那么，显示同样20px的在小手机就占用20px， 在大手机占用40px，如图
px：将显示器分成小方格， 每个方格就是一个像素， 网页重构使用的px和屏幕分辨率的px不一定是一样的大小
重构移动页面的时候使用px和安卓开发使用dp是一样的， 背后的dpi不一样， 对应的系数帮我们适配到这个手机的大小， 详见上面的dp解释
----------------------------------------------------------------------------------------------------
viewport
手机浏览器把页面放在一个虚拟的窗口， 窗口可以大于或小于手机的可视区域， 用户可通过平移或者缩放看网页的其他部分
一般手机默认viewport是980px/1024px
viewport的设置一般如下
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参数对应
网页重构时使用的px将显示器分成细小的方格， 每个放歌就是一个像素（和屏幕分辨率的640px × 320p不一样）
iphone如果不设置viewport， 那么默认是980px， 就把屏幕分成980分， 如果设置一个元素为100px * 100px， 那么就占用屏幕的100/980
如果设置了viewport: width= device-width， 那么屏幕酒杯就被分成320份（假设屏幕是320px），设置一个元素属性为100px * 100px， 那么就占用了100/320
在不同的手机设置viewport： width=device-width， viewport的大小反而差不多
如
iPhone6的屏幕分辨率是1334*750px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。
红米1s的屏幕分辨率是1280*720px，ppi是312，所以系数是2x。那device-width就等于720/2=360px。
--------------------------------------------------------------------------------------------------
总结：
给元素赋予固定的像素值，给字体16px的大小，在大部分手机里能看起来差不多大小，所以我们并不需要写其他尺寸来适配不同的屏幕大小
参考：
http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml
---恢复内容结束---
