设备（物理）像素和CSS（逻辑）像素

最新推荐文章于 2024-05-05 01:06:48 发布
最新推荐文章于 2024-05-05 01:06:48 发布
阅读量1.2k 收藏 9
点赞数 2
分类专栏： 前端 HTML+CSS javaScript 文章标签： 物理像素 css像素 逻辑像素 设备像素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cao_Mary/article/details/100882698
版权
前端 同时被 3 个专栏收录
54 篇文章 3 订阅
订阅专栏
javaScript
31 篇文章 0 订阅
订阅专栏
HTML+CSS
19 篇文章 0 订阅
订阅专栏
1.什么是设备像素和CSS像素?
  • 1.1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变
  • 1.2、CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素
    例如:
iPhone3G/iPhone3GS3.5英寸逻辑像素320*480设备像素320*480
iPhone4/4S3.5英寸逻辑像素320*480设备像素640*960

也就是说CSS像素和设备像素在有的时候是不一样的
CSS像素和设备像素在有的时候是不一样的

2.什么时候不一样?为什么不一样?

  • 2.1在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,
    所以我们无需关心PC端的CSS像素和设备像素

  • 2.2在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,
    但是后来一个改变世界的男人(乔布斯)改变了这一切~
    从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。
    iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍
    这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素
    而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素
    所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些
    在这里插入图片描述

Cao_Mary
关注
专栏目录
关于像素，分辨率，viewport，设备像素，css像素，Retina
在坑中上爬，在打击中成长
08-18 2696
参考文章： http://jianshu.io/p/af6dad66e49a http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
2401_84091502的博客
04-03 857
一只笔的像素如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
分辨率，PPi,DPI,DPR,物理像素，逻辑像素
weixin_34221775的博客
10-08 223
屏幕尺寸：指的是屏幕对角线的长度 分辨率：是指宽度上和高度上最多能显示的物理像素点个数 点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小 PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度 DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思 设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个...
掌握web开发基础系列--物理像素、逻辑像素、css像素
weixin_34269583的博客
05-07 970
思考一下 什么是物理像素？什么是css像素？ 在 《掌握web开发基础系列--长度单位》 这篇文章中已经介绍过了css像素单位--px，这篇文章详细探讨一下设备物理像素和css像素之间的关系。 “像素”，是一个名词，在不同的上下文中所描述的东西可能不一样，但是也可能存在一定关系。 两种像素 注：下面很多是直接引用参考文章中的描述，主要原因是原文写的很棒，为作者点赞！ 物理像素 设备屏幕实际拥...
物理像素&CSS像素
qq_45021462的博客
09-09 465
1. 屏幕尺寸 屏幕尺寸是手机屏幕的对角线的长度。5.2寸手机，是其对角线长为5.2寸。 1英寸 = 2.54厘米 2. 分辨率（物理像素） 分辨率是屏幕上的像素点数，1920x1080分辨率的手机，表示其横向有1080个像素点，纵向有1920个像素点。这个值是每个手机出厂的时候就设定好的。 3. 分辨率比 1920x1080，比为16:9，这个值也可以看作是手机屏幕比。 4. 屏幕像素密度 PPI （pixel per inch)，即每英寸长度所能显示的像素（pixel）的数目。PPI值越大表示显示屏能以
物理像素和逻辑像素
weixin_43989621的博客
07-13 1584
新增知识补充 一、position属性 1、position: sticky; 粘性定位 2、粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 二、屏幕名称 1、什么是像素： 像素，又称画素，是图像显示的基本单位。 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。 2、ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度 [外链图片转存失败,源站可能有防
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
weixin_39721000的博客
06-04 728
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下，点越多、图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel)物理像素也叫设备像素(dp:device pixel)1.2逻辑像素pt: html css中的使用的单位像素px: 实际上指的是逻辑像素ptpx: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点,...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport(1)
最新发布
2401_84092456的博客
05-05 272
一只笔的像素如下：自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
设备像素、css像素、设备独立像素、dpr、ppi 之间的区别
qq_42424368的博客
03-15 788
一、背景 在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉，我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的 当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异 这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念 二、介绍 CSS像素 CSS像素（css pixe.
移动端基础物理像素、分辨率、逻辑像素、设备像素、缩放、ppi视口、meta
独滕的博客
01-07 859
移动端基础 物理像素 像素点 移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。 分辨率 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。 屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细 1px是否=一个物理像素 在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素 随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点
CSS像素和物理像素
chen__cheng的博客
05-16 1882
1. CSS像素 什么是CSS像素？ CSS像素又称为逻辑像素，虚拟像素，也称为直觉像素。CSS像素所使用的单位是px。是一个相对单位。 为什么会有CSS像素产生呢？ 屏幕显示是由一个一个不连续的点组成，最小组成单位为物理像素。而在现实生活中，人肉眼看到的是一系列连续的图形，因此采用CSS像素来进行衡量。 而CSS像素是如何计算的呢？ CSS像素是个相对单位，1px等于几个物理像素。 但是仍然存在一定的问题 相同尺寸设备，不同屏幕密度 假设按照1px = 2pt进行显示，有一个盒子大小为6px/3px
CSS像素和物理像素的区别&&像素比DPR
wddthn的博客
01-13 1187
1，物理像素 他也被称为设备像素，他是屏幕的物理单位，他是现实中实际存在的，任何带有屏幕的设备都是有像素组成的，他的像素是在出厂的时候是已经设置好的。 2，css像素 （逻辑像素） 它也被称为设备的独立像素，是web前端开发者构造的，他不是实际存在的，在css和javascript中使用的一个抽象的层，每一个css声明和几乎所有的javascript属性都使用css像素，因此实际上从来用不上设备像素（一个css像素）里可能包含一个或多个像素点，包含的越多屏幕上看的越清晰。（pc端电脑上的物理像素和cs
作为前端需要知道的逻辑像素、设备像素、dpr、dpi...
xdididi的博客
03-21 738
作为前端开发者，我们经常需要面对各种不同的屏幕，如 PC、iPad、移动端等。这些屏幕的尺寸和分辨率各不相同，因此我们在 CSS 中设置的相同像素单位（px）在不同屏幕上的显示效果也会有所差异。如果你想深入了解其中的原因，那么就跟着本文一起探究一下像素的奥秘吧。首先我们需要知道什么是?设备像素，也称为物理像素，是指屏幕上的实际像素。我们都知道，屏幕是由许多小方块组成的，每个小方块只能显示一种颜色，而这 1 个小方块就是 1 个设备像素。每个设备的设备像素大小都不同，而且它们在出厂时就已经确定了每个设备像素的
设备像素，设备独立像素，CSS像素 & meta viewport
HansExploration的博客
03-22 853
前言这两个属性说难不难，说容易又不易容。但如果你弄明白了这个，你就明白了一些东西，一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起，其实虽然标题里是三个名词，但我们接下来只聊两个就可以了，为什么？看完你就知道了。基本定义设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。CSS像素：CSS像...
像素（物理像素dp、逻辑像素dip、物理像素 / 逻辑像素drp）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
04-26 2511
1.1物理像素(设备像素-device pixels) 1个物理像素就代表1个真实的像素点，是设备屏幕能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的物理像素单位。 1.2逻辑像素(设备独立像素-device independent pixels) 逻辑像素：是与设备屏幕无关的像素，它可以通过程序控制使用的虚拟像素，是一个总体概念。逻辑像素中包括了CSS像素。
物理像素、逻辑像素、DPR理解，及移动端border 1px问题
smile_hahahaxixi的博客
12-06 403
像素： 【像素 pixel】是图像显示的基本单位，表示“图像元素”。 ppi: 【ppi】是屏幕上每英寸可以显示的像素（点）的数量，即屏幕像素密度。 像素的分类： 1.设备像素（物理像素）：设备屏幕的物理像素，在同一个设备上，它的物理像素都是固定的。 2.css像素（逻辑像素）：是为web开发者创造的，在CSS和javascript中使用的一个抽象的层。 在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。 设备物理像素：window.devicePixelRatio 设备逻辑像素：docum
设备像素和CSS 像素
Mofeng的专栏
05-30 1386
我们需要理解设备像素和CSS像素的概念，以及二者之间的差异。设备像素，顾名思义，就是设备的像素，它说明了设备的分辨率，一般我们可以通过screen.width/height来得到。而CSS像素是我们前端开发常用的，比如设置某个div的宽度是128px, 实际上是指CSS像素。 假如我们的浏览器宽度是1024px，那么在最大化窗口的情况下，浏览器宽是div宽的8倍；但如果我们放到浏览器窗口，比如放
css像素与设备像素问题
weixin_38999683的博客
07-30 228
Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。 ...
1px大小解密：设备像素与逻辑像素的关系
在桌面设备上，通常逻辑像素与物理像素一致，但在高分辨率移动设备上，例如iPhone 6s，为了使内容清晰可见，会根据屏幕的像素密度自动进行缩放。 总结来说，1px的大小在不同的设备、分辨率、像素密度和缩放设置下会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值