px是什么单位,px是什么单位 多少厘米

2024-04-13 22:35:24 综合百科 投稿:口天吴
最佳答案px是计算机语言中的像素单位。像素是指基本原色素及其灰度的基本编码,由Picture(图像)和Element(元素)这两个单词的字母所组成的,如同摄影的相片一样,数码影像也具有连续性的浓淡阶调。若把影像放大数倍,会发现这些连续色调其实是由许多色彩相近的小方点所组成,这些小

px是什么单位

1

px是计算机语言中的像素单位。

像素是指基本原色素及其灰度的基本编码,由Picture(图像)和Element(元素)这两个单词的字母所组成的,如同摄影的相片一样,数码影像也具有连续性的浓淡阶调。

若把影像放大数倍,会发现这些连续色调其实是由许多色彩相近的小方点所组成,这些小方点就是构成影像的最小单位“像素”。这种最小的图形的单元能在屏幕上显示通常是单个的染色点。像素的大小是会“变”的,也称为“相对长度”。越高位的像素,其拥有的色板也就越丰富,越能表达颜色的真实感。

px什么意思

2

在摄影中 PX 是像素(pixel)的意思

比如:长边小于3000PX,就是长边像素在3000以小

在 PHOTOSHOP 里,图象的长宽是以像素表示的,在各个图库,各种摄影展,摄影赛上,都对照片的大小有要求,也是用像素做照片的长宽单位,简称 PX

前端-CSS中的单位-PX, EM, REM, %, VW, VH啥区别

3

PX、EM、REM、%、VW 或 VH 这些CSS单位有什么区别?什么时候该用哪个?今天我们来了解一下。

让我们从基础开始,在CSS中,您可以使用各种度量单位指定元素的大小或长度,有些是绝对单位,有些是相对单位。

绝对单位:

PX:像素 (px) 被视为绝对单位,尽管它们与查看设备的 DPI 和分辨率有关。 但是在设备本身上,PX 单元是固定的,不会基于任何其他元素而改变。 对于响应式站点来说,使用 PX 可能会有问题,但它们对于保持某些元素的大小一致很有用。 如果您有不应该调整大小的元素,那么使用 PX 是一个不错的选择。

相对单位:

EM:相对于父元素REM:相对于根元素(HTML 标签)%:相对于父元素VW:相对于视口的宽度VH:相对于视口的高度与 PX 不同,%、EM 和 REM 等相对单位更适合响应式设计。相对单位在不同的设备上可以更好地缩放,因为它们可以根据另一个元素的大小进行缩放。

让我们来看个例子

在大多数浏览器中,默认字体大小为 16 像素。 相对单位从这个基础计算大小。 如果您通过 CSS 为 HTML 标记设置基本尺寸来更改该基本尺寸,那么更改的尺寸将成为计算整个页面其余部分的相对单位的基础。 同样,如果用户调整了她的字体大小,那么这将成为计算相对单位的基础。那么在处理默认的 16px 时,这些单位是什么意思呢?

1em = 16px (1 * 16)2em = 32px (2 * 16).5em = 8px (.5 * 16)

1rem = 16px2rem = 32px.5rem = 8px

100% = 16px200% = 32px50% = 8px

但是如果您或用户更改了默认大小怎么办? 因为这些是相对单位,所以最终尺寸值将基于新的基本尺寸。 虽然默认值为 16 像素,但如果您或用户将其更改为 14 像素,则计算出的尺寸最终将是:

1em = 14px (1 * 14)2em = 28px (2 * 14).5em = 7px (.5 * 14)

1rem = 14px2rem = 28px.5rem = 7px

100% = 14px200% = 28px50% = 7px这使用户可以自由调整其默认浏览器字体大小,同时仍保持您指定的每个元素的相对比例。

EM 和 REM有什么区别?

查看上面的图表,它显示 EM 和 REM 看起来完全一样。 那么它们有什么不同呢?

简而言之,它们因继承而异。 如前所述,REM 基于根元素 (HTML)。 然后,每个使用 REM 的子元素都将使用 HTML 根大小作为其计算点,而不管父元素是否指定了任何不同的大小。

另一方面,EM 基于父元素的字体大小。 如果父元素的大小与根元素的大小不同,则 EM 计算将基于父元素,而不是根元素。 这意味着使用 EM 进行大小调整的嵌套元素有时最终会达到您未预料到的大小。 另一方面,如果您需要它来指定页面特定区域的大小,它确实为您提供了更细粒度的控制。

看下面的例子,如果parent没有指定任何字体,那么,他们都将根据相同的字体来计算长度,所以所有rem em都相等。

而如果给parent设置了不同的字体大小,情况就不同了,em会根据新的字体大小计算长度。在parent外面的div不受影响,如下图。

什么是VW和VH?

虽然 PX、EM 和 REM 主要用于字体大小,但 %、VW 和 VH 主要用于边距、填充、间距和宽度/高度。

重申一下,VH 代表“视口高度”,即可视屏幕的高度。 100VH 表示视口高度的 100%,或屏幕的整个高度。当然,VW 代表“视口宽度”,即可视屏幕的宽度。 100VW 表示视口宽度的 100%,或屏幕的整个宽度。 % 反映了父元素大小的百分比,与视口的大小无关。

视口单位表示当前浏览器视口(当前浏览器大小)的百分比。虽然类似于 % 单位,但还是有区别的。 视口单位计算为浏览器当前视口大小的百分比。 另一方面,百分比单位计算为父元素的百分比,这可能与视口大小不同。

让我们考虑一个 480px x 800px 的移动屏幕视口示例。

1 VW = 视口宽度的 1%(或 4.8px)50 VW = 视口宽度的 50%(或 240px)1 VH = 视口高度的 1%(或 8px)50 VH = 视口高度的 50%(或 400px)

如果视口大小发生变化,元素的大小也会相应变化。

结论:

什么时候改用什么单位呢?

归根结底,这个问题没有完美的答案。一般来说,通常最好选择相对单位之一而不是 PX,这样您的网页就有机会呈现出精美的响应式设计。但是,如果您需要确保元素永远不会在任何断点处调整大小并且无论用户是否选择了不同的默认大小都保持不变,请选择 PX。 PX 即使显示不理想,也能确保一致的结果。

EM 是相对于父元素的字体大小的,所以如果你想根据父元素的大小来缩放元素的大小,请使用 EM。

REM 是相对于根 (HTML) 字体大小的,因此如果您希望根据根大小缩放元素的大小,无论父大小是什么,都使用 REM。如果您使用过 EM,并且由于大量嵌套元素而发现大小问题,那么 REM 可能是更好的选择。

VW 对于创建填充整个视口宽度的全宽元素 (100%) 很有用。当然,您可以使用视口宽度的任何百分比来实现其他目标,例如一半宽度的 50VW 等。

VH 对于创建填充整个视口高度的全高元素 (100%) 很有用。当然,您可以使用视口高度的任意百分比来实现其他目标,例如一半高度的 50VH 等。

% 类似于 VW 和 VH,但它不是相对于视口宽度或高度的长度。相反,它是父元素宽度或高度的百分比。

WwW.BaiKeZhishi.Com
标签: 单位 px
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们(管理员邮箱:baikezhishi@foxmail.com),情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!