一文讲清前端应该理解的分辨率/逻辑分辨率/物理分辨率

1. 设备像素（物理像素）
   顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，**它上面的物理像素点就固定不变了，单位pt。

2. 分辨率
   通常我们的电脑分辨率为1920*1080等，从左到右排1920个像素点，从上到下可以排1080个像素点，也就是说显示屏上会显示多少个像素点，像素点越多，屏幕自然也就越清晰。

3. 又称逻辑像素（设备独立像素）。
   首先要知道，逻辑像素可以通过软件改变的想怎么改就怎么改。

缩放至150%后发生了什么变化？

相当于将原来的一个像素放大至1.5倍，因屏幕尺寸固定，所以可以容纳的像素点数变少了。则分辨率为：（1920/150%）*（1080/150%）,

以后我们前端开发人员要专业一些：一块屏有两个分辨率。

总结

• 物理分辨率是出厂时设置的，是不可变的；
• 逻辑分辨率是有软件（驱动）决定的。

问：我们前端开发时是基于逻辑像素进行开发 or 物理像素?

答：逻辑像素。

看个例子就明白了;
首先看一下我电脑全屏时淘宝首页的分辨率（PC端）：

再看看我电脑的物理像素：

明显是和逻辑像素不相等的。

下面我们看看移动端，也是分物理分辨率和逻辑分辨率：

移动端同样是针对逻辑分辨率进行开发的。

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
不同手机的逻辑分辨率都不同， 但网页宽度为100%；

我们如何实现网页的宽度和逻辑分辨率尺寸相同？

使用meta标签，vscode可自动生成。

其中：

• viewport：视口
• width=device-width：视口宽度 = 设备宽度（逻辑分辨率）
• initial-scale=1.0：缩放1倍（不缩放)

注意： 写移动端时一定要加上视口标签！！！目的是为了让网页宽度和设备宽度（逻辑分辨率）相同。

问：PC端有无视口概念？

有的，PC端网页尺寸和屏幕的逻辑分辨率是默认就是相等的，无需处理，但移动端默认不相等，需要加上视口标签。