在前端开发过程中,必须会用的单位是像素px
像素可分为物理像素和CSS像素.
物理像素:我们的页面展示在数字显示屏上,如果我们仔细观察手机或者电脑能发现,显示器是由一格一格的正方形组成,而这个正方形就是设备上显示的最小单位
CSS像素:就是我们在写样式时用到的比如width:100px.
分辨率:单位长度中，所表达或撷取的像素数目.
PC端:如果你的电脑设置了分辨率是1920*1080,那么你的显示器一行就是1920px,如果你的布局大于1920在你的显示器上就会换行,如果设置的是1280*768,那么你的布局一行超过1280px就会换行(当然浏览器正常情况下是不会全屏的,会损失一些像素,只有在全屏的模式下浏览器的宽度才等于屏幕宽度,可以F11全屏模式,window.innerWidth去获取宽度),如果你的电脑还设置了缩放比例,那么屏幕能显示的像素=分辨率/缩放比例,如果是1920的就只能显示1536了
手机端:手机端的分辨率都是设置好的,比如iphone6的分辨率是750*1334但是css像素却是375*667,原因就是iphone是两倍屏也就是他的缩放比例是200%
CSS像素和物理像素的关系
| 设备名称 | 分辨率 | 缩放比例 | CSS像素(px) |
| pc | 1920*1080 | 100% | 1920*1080 |
| pc | 1920*1080 | 125% | 1536*864 |
| iphone6 | 750*1334 | 200% | 375*667 |
| iphoneX | 1125 *2436 | 300% | 375*812 |