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

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

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍 首先，什么是viewport

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

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

2.知识剖析 a.移动设备的默认viewport： 为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）

b.css中的px、移动设备的分辨率以及UI口中的‘像素’分别怎么理解 css中的px：

在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素

没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）

写个20px的文字看看效果（见演示）

在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip

dp/dip是在不同设备都显示为同一大小的单位（见演示）

简单理解，在使用了

之后，所有1px = 1dp/dip

添加meta标签后20px的文字（见演示）

设备的独立像素都是可以查到的

dp

移动设备的分辨率：

说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)

dpi/ppi是表示一个每inch多少个物理像素dot的单位

在最开始是160dpi/ppi

后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕

下面继续说移动设备分辨率

我们可以理解分辨率就是长宽分别有多少个物理像素dot

但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）

UI口中的‘像素’

UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）

UI口中的像素是移动设备分辨率

3.常见问题 UI图拿到之后，宽度是750px或者640px怎么办？ 4.解决方案 不负责任的说法：除以2写到css里

更不负责任的说法：使用js动态控制viewport，这个这次就不讲了，自己查

5.编码实战 前面演示得不够多？ 6.扩展思考 1.如何使用js动态控制viewport

2.如何理解其他vw、vh等单位

7.参考文献 移动前端开发之viewport的深入理解

深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

8.更多讨论 鸣谢 感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

快来与我一起学习吧~http://www.jnshu.com/login/1/21109035

转载于:https://juejin.im/post/5ae6b907f265da0b8a676604