CSS 中的像素(px)

px 是一个我们经常在开发中使用的一个单元;
它表示在屏幕上展示的最小单元;

但是, 在 CSS 中像素可能和我们想象的不太一样.

CSS 中的 px 是逻辑距离还是物理距离

答: 是逻辑距离;

像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit);
同时, 在 CSS 中它是一个相对像素 (reference pixel);

浏览器会根据设备像素比(devicePixelRatio), 来展示图像;
所以, 在 CSS 中 1px 可不一定对应真实在显示器上的 1px 哦!

例如: 在我屏幕分辨率是 2560 * 1600的 13 寸笔记本上;
网页展示的文本是 16px, 但是实际上物理上却是 32px;

可以看到, 浏览器中可用的宽高和实际的分辨率并不一致

其中有一个计算公式:

CSS Pixel = Device Pixels / Device Pixel Ratio

为什么要使用逻辑像素

答：适配不同的设备，让他们看起来更有一致性；

为什么要使用 2 倍图

因为: CSS 中的像素是逻辑像素; 是不是前后呼应了

CSS 中的像素(px)相关推荐

CSS中em和px单位的区别(转)
这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收 ...
css中，用px自动转化为rem
新建一个mixin.scss文件,里面写:(非常适用于移动端) // $ratio 随便起的变量名 // 375:!Phone默认的最大宽度 $ratio: 375 / 10;//默认的初始值@fun ...
说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
css中em与px的介绍及换算方法
em是什么? em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font -size的 ...
HTML和CSS中的像素的三个单位
PX: PX是Pixel的缩写,单位名称为像素,也就是说px是组成屏幕图像的最小独立元素.像素是相对于显示器屏幕分辨率而言的. EM: EM是emphasize的缩写,单位名称为相对长度单位.EM是相 ...
为了彻底弄懂CSS中的1px究竟有多长，我翻出了家里的卷尺
CSS是描述HTML文档如何显示的,在显示的过程中,HTML元素的长宽.间距.字体大小等等,都需要通过长度尺寸单位来表示.我们常常会说:字体大小16像素, 间距10个像素.这里的像素,就是CSS中的长 ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
【CSS】物理像素 DP(device pixels)、物理像素比（DPR）、px 逻辑像素（CSS像素）、DPI、PPI 的概念解析以及1px问题解决方法
物理像素 .物理像素比.物理像素比.px 逻辑像素概念解析前言一.前提概念 1.分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的 DPI( ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...

CSS 中的像素(px)

CSS 中的像素(px)

CSS 中的 px 是逻辑距离还是物理距离

为什么要使用逻辑像素

为什么要使用 2 倍图

CSS 中的像素(px)相关推荐

最新文章

热门文章