css中的px与屏幕实际的分辨率的关系

最新推荐文章于 2025-06-22 23:21:53 发布
最新推荐文章于 2025-06-22 23:21:53 发布
阅读量5.6k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_23947467/article/details/86658490
本文详细解释了CSS中的逻辑像素（DIP）概念及其与屏幕物理像素的关系，通过DPR（设备像素比）将两者联系起来，以iPhone7为例说明了逻辑像素与物理像素的换算过程。

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

1.css中的px称为逻辑像素 ：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。

2.屏幕的分辨率是物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

他们之前的关系是通过一个DPR来联系的，DPR=物理像素/逻辑像素   

注意的是在浏览器中的手机选项中显示的是手机的逻辑像素。

iphone7的的物理像素1334*750，dpr为2  所以逻辑像素为667*375

具体参考下路的博客：

http://www.mamicode.com/info-detail-2396539.html

Bowles-Liu
关注
dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
07-14 2771
一、基本概念 dip ： Densityindependent pixels ，设备无关像素。 dp ：就是dip px ： 像素 dpi ：dots per inch ， 直接来说就是一英寸多少个像素点。常见取值 120，160，240。我一般称作像素密度，简称密度 density ： 直接翻译的话貌似叫 密度。常见...
px,dpi,分辨率,屏幕尺寸,dp 之间的关系
weixin_34255055的博客
03-27 2045
1：px ：就是常说的像素，是手机屏幕显示的最小单元2：dpi：屏幕像素密度，每英寸的像素点。 标准屏幕像素密度mdpi：每英寸有160个像素点，称为标准屏幕像素密度3：分辨率：横向像素点个数*纵向像素点个数 1px就是一个像素点4：屏幕尺寸：手机对角线的物理尺寸 ...
px和分辨率的关系总结
wmwmdtt的博客
06-04 2万+
在相同的屏幕宽高下：如：15.6英寸（396.24毫米）的笔记本电脑： 每单位 1920*xxx的分辨率 1366*xxx的分辨率 一毫米 1920/396.24=4.8个px 1366/396.24=3.4个px 高分辨率意味着大约每一毫米5像素点，像素点越多，色块越多，页面越清晰 低分辨率意味着大约每一毫米3像素点，像素点越少，色块越少，页面越模...
HTTP协议详解
最新发布
JMY_2016的博客
06-22 1162
定义：应用层协议，基于客户端-服务器模型作用：规范客户端与服务器之间如何请求和传输资源特点无状态协议：每个请求独立，服务器不保留客户端状态可扩展：通过头部字段支持新功能基于文本（HTTP/1.x），HTTP/2后改为二进制格式。
手机分辨率和网页中的PX是一回事吗？
weixin_42012282的博客
05-18 1737
.1.背景介绍 首先，什么是viewport。 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。 再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小， 它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 什么是绝对长度单位？什么是相对长度单位？ 绝对长度单位：in（inc...
一文搞懂像素（px）、分辨率、CSS长度单位
qq_37384271的博客
11-04 3万+
对于做前端的朋友，相信看到像素（pixel）、分辨率、CSS长度单位（如：px、em、rem、vh）这些概念都不陌生，但是对它们之间的关系是否清楚呢？以及如何区分应用场景？本文将讲清楚这些内容。 一、像素 像素是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或小方块（尽管可以用点或小方块来呈现），而是一个抽象概念。 不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.3mm之间。 液晶显示器点距参考表（1 英寸 =
整理下"分辨率"、"DPI"、px、pt...等概念
Win32FanEx 的专栏
11-01 1795
两篇参考文章： Windows上，调整dpi可使字体变大 pt, px与dpi的关系 自己的总结理解： 1. "分辨率"（resolution）到底是指什么？分辨率有时被用来指最大像素数量，有时被用来指DPI。取决于用户更关心哪一项数据。 2. DPI是数字显示设备（区别于模拟显示设备如CRT显示器）的重要性能参数。表示在一平方英寸内最多可以输出多少个像素点。 3. 表示图形尺寸主要有...
搞清楚CSS中单位px与em之间的关系和特点
12-13
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点...像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手
css判断不同分辨率显示不同宽度布局实现自适应宽度
12-13
CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
在CSS布局设计中，绝对定位是一种强大的工具，用于精确控制元素在页面上的位置。然而，当面临不同分辨率的设备时，绝对定位可能会遇到显示问题。本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上...
不同屏幕分辨率实现 1px 边框
qq_39454432的博客
04-28 638
不同屏幕分辨率实现 1px 边框
第119天：移动端：CSS像素、屏幕像素和视口的关系
lelara的博客
12-19 705
移动前端中常说的viewport（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是dip （与设备无关的像素设备逻辑像素）和CSS 像素之间的关系。这里首先了解以下几个概念。 一，视口 1，layout viewport（布局视口） 　　一般移动设备的浏览器都默认设置了一个视口 元标签，定义一个虚拟的布局视口（布局视口），用于解决早期的页面在手机上显示的问题.iOS，Andro...
pixel(css pixel & device pixel)&resolution&css pixel(像素和分辨率)
xuchaoxin1375的博客
01-09 2013
pixel&resolution(像素和分辨率) css pixel & device pixel One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th
前端开发——从px到rem再到rpx的知识点简介和总结
ganle的博客
01-14 1180
一、px (pixel) 物理像素： 设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。 逻辑像素： 也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。 ...
前端单位px，pt，rem，逻辑像素，物理像素
大梦前端
01-19 625
px = 逻辑像素 pt = 物理像素 rem = 相对单位，对标html标签设置的字体大小 详见 http://yueziyao.site/2021/01/18/screen/
px em rem关系
sly94的博客
04-18 385
一：px（像素） px和屏幕分辨率关系 1.显示分辨率就是屏幕上显示的像素个数，而像素是指能单独显示颜色的最小单位 2.计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量 3.分辨率1600*900的意思是水平方向含有像素数为1600个，垂直方向像素数900个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。 4.画面是由许多的像素点组成，而画质的细腻就是由点距来决定的，点
CSS像素（px）、物理像素（pt）、rem、em、rpx
热门推荐
yangyang的专栏
07-24 3万+
1.
像素（物理像素dp、逻辑像素dip、物理像素 / 逻辑像素drp）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
04-26 2972
1.1物理像素(设备像素-device pixels) 1个物理像素就代表1个真实的像素点，是设备屏幕能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的物理像素单位。 1.2逻辑像素(设备独立像素-device independent pixels) 逻辑像素：是与设备屏幕无关的像素，它可以通过程序控制使用的虚拟像素，是一个总体概念。逻辑像素中包括了CSS像素。
移动端开发 - 物理像素、逻辑像素、dpr等概念梳理
LRQQHM的博客
01-05 2175
屏幕尺寸 屏幕尺寸一般用英寸（inch）来描述，指的是屏幕对角线的长度，例如平时常常说的 13寸、15寸、27寸指的就是这个，手机的 6.1寸、6.5寸也是如此 其计算方式如下： 通过屏幕宽高可以计算出对角线长度（单位：mm），又由于 1英寸=25.4mm ，因此可以通过这种方式计算出屏幕的尺寸。 分辨率 分辨率一般可以细分为屏幕分辨率、图像分辨率、打印分辨率等。 屏幕分辨率 对于屏幕分辨率而言，指的是显示器显示的像素点数，例如经常看到的 1024768、1366768、2560 x 1600 等，在屏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值