手机分辨率和网页中的PX是一回事吗？

. 1.背景介绍

首先，什么是viewport。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，

它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

什么是绝对长度单位？什么是相对长度单位？

绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。 in、cm、mm和实际中的

常用单位完全相同。

pt是标准印刷上常用的单位，72pt的长度为1英寸。

pc也是印刷上用的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。

相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等。

2.知识解析

什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？

屏幕尺寸:指屏幕的对角线的长度，单位是英寸，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的宽度要小的。

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"

initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用

3.常见问题

当UI设计师给一个图的时候，为什么同是一个尺寸（px）而两者的大小不一样

4.解决方案

在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。 Android和IOS都会通过转

换系数让控件适应屏幕的尺寸。一个按钮给了44*44dp的大小，在160dpi密度的 时候，

按钮就是44*44px大小；在320dpi密度的时候，按钮就是88*88px的大小。不需要我们去书写多套尺寸

5.编码实战

6.扩展思考

移动端常用的方案有哪些？

简单方法简单解决(使用PX)

代表：拉钩网 弹性布局

开发原则：文字流式，控件弹性，图片等比缩放

使用rem布局

代表：网易、淘宝

使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦， 网易是如何解决的呢？

最根本的原因在于，

网易页面上html的font-size不是预先通过媒介查询在css里定义好的， 而是通过js计算出来的。

问题；

1.

 计算像素密度的公式：

 　勾股定理算出对角线的分辨率：√(1920²+1080²)≈2203px

　　对角线分辨率除以屏幕尺寸：2203/5≈440dpi。

2.什么是物理分辨率

手机出厂的时候以及设置好的分辨率，是不可更改的，如小米mix2的分辨率就是1980px*2216px

3.写响应式的页面用em好还是用rem好，两者有什么差别

em是相对父级，rem相对根元素；一般在写响应式页面的时候，通常是使用rem