首页 > 其他分享 >px,魔法单位 | CSS

px,魔法单位 | CSS

时间:2022-09-01 00:34:59浏览次数:102  
标签:px 魔法 像素 1px 屏幕 CSS 设备

px,魔法单位 | CSS

1px 是指 CSS 中每个屏幕上的 1 个像素吗?

Minecraft pixel art

我们都在 CSS 中使用 px 单位来为宽度、高度、边距、字体大小等赋值。但这里的问题是一个像素到底是多少。它是否适用于所有屏幕尺寸?

简短的回答是 px 不固定 , 但是 1px 会有 相同的视觉外观 与屏幕像素比、屏幕尺寸或设备无关。此外,即使在打印机上,1px 线看起来与计算机屏幕上的一样。要知道为什么,请继续阅读。

为什么会这样?

在上面的段落中,您可能会觉得写了两处矛盾的东西,即 px 单位不固定,但具有相同的视觉外观。为了理解这一点,让我们首先研究一下任何显示器中称为 PPI(每英寸像素数)的东西。

PPI,这到底是什么意思!!

通常每个屏幕都由像素组成,像素密度越高,分辨率越高。 PPI 代表每英寸像素,即屏幕上 1 英寸 x 1 英寸正方形中包含的像素。像素是屏幕或计算机图像上的照明或颜色区域。

像素密度因不同的显示器和设备而异。您可能已经注意到,每当我们查看任何显示器或移动设备规格时。术语像素密度会有所不同。 PPI 越高,图像越清晰。

在下图中,小方块是像素,它们共同使图像在屏幕上可见。这是图像在低分辨率设备(或低 PPI 设备)上的外观示例。

现在我们已经了解了像素密度和像素。让我们看看它与单位“px”的关系。

CSS 中定义的 1px 是否正好占用屏幕宽度的 1 个像素?

如果我们查看诸如 cm、mm、inch、pt 之类的单位,无论我们在哪里使用它们,这些单位都是固定的,1cm 将与我们的比例尺上的 1cm 相同。

但这不是 px 的情况。 px 单位是 ** 魔法** CSS 的单位,它与当前字体大小无关,通常也与物理厘米或英寸无关。

px 单位被定义为小但可见,因此可以显示水平 1px 宽的线,边缘锐利(无抗锯齿)。

什么是锋利的、小的和可见的取决于使用它的设备。例如。手机近在眼前,电脑屏幕近在咫尺。因此 px 是 取决于设备类型及其典型用途。

了解一个外观 **像素** ,想象一下 1990 年代的 CRT 电脑显示器。它可以显示的最小点约为 1/100 英寸(0.25 毫米)或更多。这 **像素** 单位得名于那些屏幕像素。

如今,有些设备(视网膜显示器)具有更高的像素密度,即 1 平方英寸内的像素更多,从而导致像素尺寸更小。但是上个世纪使用的文件 **像素** 在 CSS 中看起来还是一样的,不管是什么设备。尤其是打印机,可以显示比 1px 细得多的锐利线条,但即使在打印机上,1px 线条看起来也与在计算机显示器上看起来非常相似。设备变了,但 **像素** 始终具有相同的视觉外观。

这是因为 1px 并不总是占用 1 个像素的图像。我们可以说,对于较旧的 CRT 显示器,但对于当前的技术设备则不然。 1px 可以被认为是 1 英寸的 1/96。

像素 (px) 与查看设备相关。对于低 PPI 设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。因此 1px 在所有类型的设备上具有相同的外观。

谢谢你 !

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/5912/23210100

标签:px,魔法,像素,1px,屏幕,CSS,设备
From: https://www.cnblogs.com/amboke/p/16645076.html

相关文章

  • 使用 CSS 输入标签 — 教程
    使用CSS输入标签—教程HTML对于HTML,我们需要一个带有标签和输入的容器。我们还将为输入设置占位符(“”),这将允许我们使用CSS检测输入何时具有某些值。<divcla......
  • 最好的新 CSS 功能
    最好的新CSS功能ThebestnewCSSfeaturesfor2022自1996年引入CSS以来,它仍然是Web开发堆栈中必不可少的、不断发展的部分。CSS不断推出新功能以响应现实世......
  • Sass 变量与 CSS 自定义属性
    Sass变量与CSS自定义属性这篇文章最初发表在我们自己的博客网站上一探究竟看到更多这样的帖子!在这篇文章中语境真正的区别不可知论方法最后的想法语境在......
  • 我们应该如何在 CSS 中使用 rem、em、vw 和 px?
    我们应该如何在CSS中使用rem、em、vw和px?当我们开始创建网站时,我们通过HTML创建网站的基本结构,并使用CSS使网站的设计看起来更好。让我们检查一下rem、em、vw......
  • 您在 CSS 媒体查询中犯的错误。
    您在CSS媒体查询中犯的错误。视口,@media,最大高度,最小宽度,@supports,仅,屏幕和其他没用的东西.如果我们有这个,我们需要什么:@media屏幕和(最大宽度:Npx){}吨我看到......
  • 简单的Css动画---边框线条动画
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • NO.6 HTML+CSS 笔记
    第一节1、HTML+CSS是两门语言,联合起来可以开发网页2、HTML+CSS+JavaScript=网页3、HTML:超文本标记语言:定义网页中有哪些内容4、CSS:层叠样式表:定义网页中的东西......
  • 前端——CSS
    CSS 指的是层叠样式表 (Cascading Style Sheets)述了如何在屏幕、纸张或其他媒体上显示HTML元素节省了大量工作。它可以同时控制多张网页的布局 CSS语法 C......
  • webpack css-loader模块化导致的antd样式不好用解决方案
    css-loader模块化会导致antd样式文件无效,解决的方式就是排除node_modules下的目标文件就可以如果你用的less就可以按以下方式来配置{test:/\.less$/,inclu......
  • HTML入门2(学习Head First HTML与CSS 第2版)
    <a>元素的内容会成为Web页面中可单击的文本。href属性告诉浏览器链接的目标文件。<ahref="链接地址">链接名称</a>1.一个页面链接到另一个页面,要使用<a>标签。2.<a>元......