物理像素、逻辑像素、DPR理解，及移动端border 1px问题

2024-05-09 10:27:05

像素：

【像素 pixel】是图像显示的基本单位，表示“图像元素”。

ppi:

【ppi】是屏幕上每英寸可以显示的像素（点）的数量，即屏幕像素密度。

像素的分类：

1.设备像素（物理像素）：设备屏幕的物理像素，在同一个设备上，它的物理像素都是固定的。
2.css像素（逻辑像素）：是为web开发者创造的，在CSS和javascript中使用的一个抽象的层。

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

设备物理像素：window.devicePixelRatio
设备逻辑像素：document.documentElement.clientWidth

DPR：

【DPR】为设备像素比，即物理像素与逻辑像素比，
在某一方向上：
DPR = 设备像素 / CSS像素

如iphone8,css像素为375px677px,dpr是2，设备像素是750px1354px。1个逻辑像素占4个物理像素（4个物理像素来显示1个css逻辑像素）。

关于移动端border 1px 变粗的问题：
在dpr为2或3时，如750设计稿上1px实为物理像素1px，但border：1px 最终渲染出来是却是1*dpr设备像素，所以看起来比设计稿粗

物理像素、逻辑像素、DPR理解，及移动端border 1px问题相关推荐

CSS媒体查询-物理像素-逻辑像素
媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口. 你可以根据设备的类型(比如屏幕设备.打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面. 媒体查询的使 ...
oracle 物理读,逻辑读的理解
1.物理读(physical read) 当数据块第一次读取到,就会缓存到buffer cache 中,而第二次读取和修改该数据块时就在内存buffer cache 了以下是例子: 1.1 第一次 ...
物理像素，逻辑像素(pt)，css像素(px)，像素比(dpr)都是什么？px，em，rem等都是什么？有什么区别？
逻辑像素.物理像素.css像素.像素密度.像素比都是什么? (像素)分辨率:手机屏幕的实际像素尺寸. 像素密度(ppi -- 像素每英寸 (ps: dpi -- 点每英寸,一般针对于打印机等)):( ...
微信小程序（布局适配与物理逻辑像素）
移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显示屏Retina.rpx ...
微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显 ...
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等如何计算手机尺寸? 知道手机屏幕的长和 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因. 1.PX(CSS pixels) 1.1 ...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport（转载）
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...

最新文章

热门文章