html - 如何定义像素?

标签 html css pixel definition

根据我到目前为止的经验,像素大小是非常相关的,并且会根据许多因素进行不同的解释。我的问题是像素如何在 html 页面中工作。

例如我们可以设置一张图片的宽高:

<img src="lalala.jpg" width="100px;" height="100px;">

100 像素究竟意味着什么?
屏幕上的 100 像素是如何翻译的?
如果在打印纸上如何翻译 100 像素?

更具体一点。如果我将图像大小设置为 100px 那么它在不同屏幕尺寸上的尺寸是否相同(以英寸为单位)?广告 如果是这样...如果我使用不同的屏幕尺寸打印同一页,它的尺寸是否相同?

最佳答案

在 HTML 中,heightwidth 属性的像素长度由 CSS 控制。在某些情况下,这些被称为 “CSS 像素”。 HTML 本身并未提供像素应代表什么的定义(因此我将 标记添加到您的问题中)。

CSS 本身有自己的 Units and Values documentation它在其关于 Absolute Lengths 的部分中定义了 Pixel :

5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

unit    definition
----    ----------
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

100 像素大约等于 1.041 英寸,它本身大约等于 2.65 厘米。

我不会回答您提出的有关不同显示器和打印的更多问题,因为这会使我的回答冗长乏味。如果您想自己找到这些答案,一个好的起点是我已经链接的同一个文档,其中详细介绍了 Reference Pixel . CSS 中的值基于 96dpi 的值(这意味着如果您用尺子测量像素密度为 96dpi 的显示器上的 96 像素将等于一英寸)。

关于html - 如何定义像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27859219/

相关文章:

javascript - ng-更改延迟,angularjs

css - 如何在 Tailwind 中设置最小高度?

html - 跨浏览器输入元素 CSS

arrays - 从像素阵列问题中获取 NSImage (Swift)

html - 我将如何在 HTML/CSS 中做这个列表

html - 如何使 div tiles 和其中的文本正确对齐?

html - 如何将背景图像作为 block 重复

c# - DecodePixelWidth 与 DecodePixelWidth 之间有什么区别?缩放变换?

android - 有没有办法直接访问 Android 中显示器像素的颜色?

html - 如何定位两个 float 的对象?