分辨率和css像素之间究竟是什么关系?

分辨率是显示器能显示的像素点有多少，也就是物理像素。一般情况下，物理像素都是通过横向像素x竖向像素得到的。那么，什么是物理像素？物理像素是一个显示屏上通过一系列的小点排列成一个大的矩形，每一个小点成为一个物理像素。比如一台设备的分辨率是1920 * 1080，意味着它在横向上排列了1920个小点，在纵向上排列了1080个小点。

在非高清和未放缩浏览器的情况下，一个css像素等于一个物理像素。 但是，在高清屏幕下（设备或浏览器厂商的设置），一个css像素一般等于两个或者三个物理像素，如果没有这个设置，在高清屏幕下，所有的样式会变得很小，难以看清。当一个css像素占用n个物理像素是，此时的dppx（dots per pixel）数为n。

可以。dppx除了和浏览器厂商设置相关，还可以通过用户去设置浏览器的放大倍数相关，当用户设置页面放大为原来的200%时，一个css像素也将乘以2，即物理像素点多了一倍，dppx为2n。

在pc端，一般情况下，一个物理像素等于一个css像素。所以，在做适配的时候，只需要了解常见的不同型号的屏幕出厂设置即可。

在移动端，目前的手机都是高清屏，基本一个css像素对应2~3个物理像素。安卓机和ios机型的出厂设置是不一样的。安卓机十分多样，没有统一规定。

对于ios：

iphone一直以来都有规范的生产尺寸：

对于安卓机： 安卓机的屏幕尺寸很多，各式各样都有，但，根据用户量来看，比较常见的是以下三种尺寸：

因此，在移动端的开发中，UI图的尺寸一般为375宽，前端做自适应即可。

了解这些概念，对于前端在做页面布局中，有什么好处呢？

首先，我们都清楚，前端在实现布局时的基础单位是px，而em，rem，vw等都是相对单位。 px这个基础单位是由分辨率/dppx决定。dppx是由设备和浏览器厂商通过默认设置（不可修改）以及用户调节（设置页面放大倍数）共同决定。

了解这些基础概念后，就可以对实际工作中的css像素使用更加知根知底。

实际应用：