前端开发像素分辨率解析

最新推荐文章于 2025-06-06 15:29:41 发布

lovelyqunq

最新推荐文章于 2025-06-06 15:29:41 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_38610536/article/details/83573752

前端开发中，像素分为物理像素和CSS像素。物理像素是显示器上的最小显示单位，而CSS像素用于样式定义。分辨率关乎单位长度内的像素数量。在PC端，显示器分辨率与布局宽度影响页面换行，缩放比例会改变实际显示像素。手机端如iPhone6，其物理分辨率与CSS像素不同，因设备具有缩放比例（如200%），导致CSS像素为物理像素的一半。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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