前言

从事前端开发这么久，没有关注过逻辑像素和物理像素，真的是打脸啊！

一、什么是css像素、物理像素、dpr

css像素：也叫做逻辑像素，或者独立设备像素；css中的1px就是一个独立设备像素。

物理像素：是指设备屏幕实际拥有的像素点，设备出厂后就不能改变的参数。

dpr：是指物理像素和css像素的的比例。当dpr=1时，说明物理像素和css像素是1:1，此时一个物理像素 == 一个css像素；当dpr = 2时，说明物理像素是css像素的两倍，那么此时4个物理像素显示一个css像素。一般来说，屏幕出厂前都已经设定好了，不可改变。

二、css中的1px等于设备的1px吗？

不等于！除非dpr等于1！

三、1px的物理像素怎么实现？

1）如果dpr = 2, transform：scale(0.5)

2) 媒体查询：

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-bt-1px {position: relative;&::after {position: absolute;bottom: 0;width: 100%;height: 1px;background-color: green;transform: scaleY(0.5);}}
}

总结

关于这篇博文，是之前面试问的问题，从来没有思考过，最近闲下来就去了解了一下。参考了另外一个博主的文章，讲的非常清楚，我这边也不赘述了。看这里

目前处于了解阶段，如果有什么不足之处，或者理解不到位之处，欢迎小伙伴们指出，共同学习进步。私聊和评论都可哦!

css像素（逻辑像素）、物理像素、dpr到底是什么？相关推荐

css像素px，物理像素（pt），设备像素比（dpr），1px边框问题，viewport自适应
关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题. 目录 **关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,v ...
逻辑像素pt和物理像素px的区别
逻辑像素和物理像素的区别表达概念 pt是逻辑像素 px是物理像素逻辑像素和物理像素: 逻辑像素(logic point):逻辑像素的单位是PT,它是按照内容的尺寸计算的单位.比如iPhone 4的 ...
【CSS】物理像素 DP(device pixels)、物理像素比（DPR）、px 逻辑像素（CSS像素）、DPI、PPI 的概念解析以及1px问题解决方法
物理像素 .物理像素比.物理像素比.px 逻辑像素概念解析前言一.前提概念 1.分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的 DPI( ...
CSS媒体查询-物理像素-逻辑像素
媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口. 你可以根据设备的类型(比如屏幕设备.打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面. 媒体查询的使 ...
8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
物理像素、逻辑像素、DPR理解，及移动端border 1px问题
像素: [像素 pixel]是图像显示的基本单位,表示"图像元素". ppi: [ppi]是屏幕上每英寸可以显示的像素(点)的数量,即屏幕像素密度. 像素的分类: 1.设备像素(物 ...
物理像素、CSS像素、dip、dpr、ppi、dpi
物理像素(physical pixel) 物理像素又被称为设备像素(dp),他是显示设备中一个最微小的物理部件.一个设备的物理像素是固定不变的.每个像素可以根据操作系统设置自己的颜色和亮度.所谓的一倍 ...
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
文章目录 1. DPI 和 PPI 是什么? 一.物理像素和css像素三.设备像素比DPR 四.viewport 五.viewport三理论:布局视口.视觉视口.理想视口五.利用meta标签对vi ...
【移动端布局】1 -基本概念：设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置
文章目录 0.关于web app 1.移动端与pc端的区别 2.尺寸相关概念 2.1.设备像素(物理像素) 2.2.CSS像素(设备独立像素,逻辑像素) 2.3.屏幕的尺寸 2.4.像素密度PPI - ...

css像素（逻辑像素）、物理像素、dpr到底是什么？

前言

一、什么是css像素、物理像素、dpr

二、css中的1px等于设备的1px吗？

三、1px的物理像素怎么实现？

总结

css像素（逻辑像素）、物理像素、dpr到底是什么？相关推荐

最新文章

热门文章