小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
引言
首先考虑一个问题 为什么移动端为什么不能像pc网站一样写
我们来看一下，我们正常的电脑网站，放到手机上会如何
2345头条：
缺点：
- 屏幕小，字太小，看起来非常的不方便
- 内容比较小，手指不容易精确点击目标
- 屏幕小，内容排版显得非常的拥挤
而且，当我们选中元素的时候，会惊奇的发现，元素看着很小，但是宽高挺大的，特别和移动端网站对比，就会发现，很奇怪的一个事情
这里的 48 * 48 比 150 * 60大很多这是怎们回事？ 想要了解清楚？我们先来学习一个关于单位的知识点。
物理像素
英寸
一般我们都用英寸来描述设备的物理尺寸，例如电脑：17英寸、13英寸，手机：6.5英寸、4英寸。
注：上面的尺寸都是屏幕对角线的长度，例如我们说一个手机 6.5英寸屏幕，其实指的就是对角线的距离。
1英寸 = 2.54 厘米
分辨率
-
屏幕分辨率屏幕具体由多少个像素组成，并不是分辨率高，就说明屏幕清晰的，这个还需要考虑尺寸问题。
-
像素一个小正方形的方块，每一个像素都具备 颜色 和 特定的位置。我们平时看到的 图片、电脑屏幕这些就是由像素组成的，所以当我们修改分辨率的时候，屏幕会发生变化。
以图片为例
左边的这个图用 1000 * 500像素点制作，右边的用 10000 * 5000的像素制作，从直观的视觉上面，我们就可以看出，右侧的图片更加清晰，是因为它用了更多的像素点，去处理颜色。
像素并不是个绝对单位
像素和我们使用的 厘米、毫米不一样，它并不是个绝对单位，我们可以看下，下面的表格
| 索尼（SONY）Xperia 10/Plus | 华为荣耀8X | |
|---|---|---|
| 屏幕尺寸（英寸） | 6.5 | 6.5 |
| 分辨率 | 2560 * 1440 | 2340 * 1080 |
| 像素点数量 | 2，918，400 | 2，527，200 |
在同样的屏幕尺寸下，索尼放的像素点 比 华为 的更多
而且，像我们电脑大部份分辨率为： 1920 * 1080（手机屏幕可比电脑小多啦）。
在相同大小的位置里面，我在第一个中，放个 9个像素点，后面的放了36个像素点
-
像素点和清晰度的关系（PPI）
如果说像素点越多，屏幕显示越清晰，这句话其实是不够准确的，因为在这里，我们还要考虑屏幕尺寸。
PPI
每英寸包含的像素点。根据这个可以判断出，哪个屏幕清晰度更高，以我们上面的数据为例：
根据公式：计算item.jd.com/8735304.htm… 华为手机ppi
最终结果：396.49
比较哪个屏幕更加清晰的时候，要根据 PPI 来进行对比。
上面我们描述的这个像素，我们称为物理像素，即设备真实存在的物理单元，时代发展的迅速，给我们的生活带来了很大的影响，手机方面尤其明显。
旧款的手机，我们可以很明显的看到粗糙的像素点。无论是文字的显示，还是图标的显示，看起来都不圆润
下面我们做一个假设：
左侧的为低分辨率手机 320 * 480
右侧的为高分辨率手机640 * 960
右侧的两个像素点的大小 = 左侧的一个像素点的大小
由于大家设定的像素点都一样，所以这里，分辨率高的屏幕上，看上去会更小。
这就是为什么同样大小的元素，在PC下 和 移动端下，显示的有差别的原因，因为移动端下的像素点，比pc下的像素点要更小
那为什么同样都是移动端
70 * 78看着比110 * 26还要大呢？？那就要从厉害的乔布斯说起啦~
未完待续
点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见：个人主页