前端开发像素分辨率解析_前端开发分辨率

在前端开发过程中,必须会用的单位是像素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像素和物理像素的关系