|
Post by account_dsabled on Jan 29, 2024 2:12:14 GMT -8
HTML 和 CSS 可用于字体大小的 CSS 长度单位演练 CSS 阿莎·拉克西米 2017 年 5 月 16 日 分享 可用于字体大小的 CSS 长度单位演练 Pause Next Unmute Current Tme Duraton 2:00 Fullscreen 本文由Tom Hodgns进行同行评审。感谢所有 StePont 的同行评审者使 StePont 内容达到最佳状态! CSS 提供了很多单位供开发人员指定不同属性的长度,如margn、paddng、lne-heght或font-sze。我们拥有许多单位的原因是它们的设计目的不同。尽管您可以使用这些单位为给定 CSS 属性指定相同的值,但该值的实际大小的计算方式有所不同。这可以使某些单元在其他单元可能表现不佳的情况下发挥作用。例如,如果您希望元素的wdth或heght属性依赖于视口的宽度或高度,则唯一值得信赖的单位是vh、vw和vmn。 vmax 在本文中,您将了解不同的长度单位以及它们如何影响它们所应用的元素的字体大小。 像素单位(px) 像素是固定大小的单位。它们通常被称为用户屏幕上的单个点。然而,当今的设备可能具有不同的像素密度。这意味着,在像素密度为标准设备的 4 倍的 WhatsApp 号码数据 设备上,我们通常称为像素的点的大小约为 1/4。通过使用参考像素计算 CSS 像素的大小可以避免此问题。参考像素定义为像素密度为 96dp、距阅读器距离为一臂长(等于 28 英寸)的设备上一个像素的视角。这使得一个像素的尺寸大约等于0.26mm。 Learn to Code wth JavaScrpt 以像素为单位设置font-sze网页上不同文本元素的尺寸既不容易维护,也不方便用户使用。如果您正在重新设计一个非常大的网站,更改所有元素的字体可能会变成一场噩梦。您还必须font-sze在不同的断点处调整许多元素,以适应不同的屏幕尺寸。此外,任何想要使用浏览器字体大小设置来缩小或放大文本的用户都无法这样做。 font-sze让我们看看以像素为单位设置的字体大小如何影响不同元素的计算值。 这是我们将用作接下来几节的参考的标记。 正如您在演示中看到的,font-sze每个元素的 等于您提供的像素值。它与该元素的嵌套无关。例如,font-sze两个链接的 都是 22px。您还可以尝试更改浏览器中的文本大小设置,但这不会影响这些元素的字体大小。 简而言之,这种缺乏灵活性是您在设置font-sze元素的 时应避免使用像素的一个很好的理由。 Em 单位 (em) Learn to Code wth JavaScrpt 使用 em 单位设置字体大小可以帮助您避免与覆盖用户首选项相关的任何问题。1em 的值取决于font-sze浏览器中的默认值。除非您或用户更改,否则默认情况下该值等于 16px。 font-sze 元素的该单位值由该元素继承的计算值确定。这意味着如果一个元素继承了则该元素的 2em 值将被计算为 50px。 以下 CSSfont-sze以 em 为单位设置前面示例中所有元素的值:上面演示中的第二个dv嵌套在另一个dv元素内。我们还将font-szefordv元素设置为 1.2em。
|
|