【修真院web小课堂】手机分辨率和网页中的px是一回事吗？201
大家好，我是IT修真院深圳分院第4期学员梁耀，一枚正直纯洁善良的web程序员。
今天给大家分享：手机分辨率和网页中的px是一回事吗？
【css-4】
分享人：梁耀
背景介绍
什么是绝对长度单位？什么是相对长度单位？
绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、
mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位，72pt的长度为1英寸。pc也是印刷上用
的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。
相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等。
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
屏幕尺寸：
指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有4.2、4.7、5.5、
6.0等。
屏幕分辨率：
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一
个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点
屏幕像素密度：
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕
像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度
越大，反之越小。
计算像素密度的公式：
通过勾股定理算出对角线的分辨率，然后在除以屏幕的尺寸
知识剖析：
viewport的概念
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率
相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网
站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由
设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这
个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
常见问题
当UI设计师给一个图的时候，为什么同是一个尺寸（px）而两者的大小不一样？
解决方案
在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。 Android和IOS都会通过转换系数让控件适应屏幕的尺寸。一个按钮给了44*44dp的大小，在160dpi密度的时候， 按钮就是44*44px大小；在320dpi密度的时候，按钮就是88*88px的大小。不需要我们去书写多套尺寸。
扩展思考
移动端常用的方案有哪些？
简单方法简单解决(使用PX)
代表：拉钩网
弹性布局
开发原则：文字流式，控件弹性，图片等比缩放
使用rem布局
代表：网易、淘宝
使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦， 网易是如何解决的呢？最根本的原因在于，网易页面上html的font-size不是预先通过媒介查询在css里定义好的， 而是通过js计算出来的
参考一 :
参考二：
Q1：
A1：像现在的主流是设定，UI设计师一般都是以iPhone6为基准，设计UI图，我们获取到
图形之后，在经过计算（我觉得公司会有文档计算好了的），按照规定文档来编写页面就可以
Q2：
A2：手机出厂的时候以及设置好的分辨率，是不可更改的，如小米mix2的分辨率就是1980px*2216px
Q3：
A3：em是相对父级，rem相对根元素；一般在写响应式页面的时候，通常是使用rem
Q4：
A4：js计算比较简便而且代码量很少；css媒体查询就比较繁琐，每一个不同分辨率下都需要重新设置
Q5：
A5：不会，像淘宝，网易这些大型网站都用这种方式，可见其优越性
