首页 >web前端 >css教程 >CSS 中的绝对单位与相对单位

CSS 中的绝对单位与相对单位

Susan Sarandon
Susan Sarandon原创
2024-09-26 18:09:02665浏览

Absolute vs. Relative Units in CSS

在 CSS 中设置元素样式时,您有两类单位可供选择:绝对单位相对单位。以下是它们的详细说明以及它们的区别:


1.绝对单位

绝对单位是固定测量单位。它们不受其他元素或屏幕尺寸的影响,这意味着无论使用它们的上下文如何,它们的尺寸都是恒定的。

常用绝对单位:

  • px(像素):像素是屏幕上的一个小方块。它是固定布局最常用的单位。

    • 示例:
    h1 {
      font-size: 24px;
    }
    
  • pt(点):通常用于印刷媒体,1pt 等于 1/72 英寸。

  • cm(厘米)in(英寸):在网页设计中很少使用,这些单位基于物理尺寸。

绝对单位的优点:

  • 一致性:无论设备或屏幕尺寸如何,尺寸始终相同。
  • 可预测:非常适合创建固定布局,您希望设计在所有平台上看起来完全相同。

缺点:

  • 缺乏灵活性:绝对单位不能很好地适应不同的屏幕尺寸或缩放设置,导致响应速度较差。

2.相对单位

相对单位灵活并根据它们使用的上下文进行缩放。它们的大小取决于其他元素,例如父容器、视口或基本字体大小。

常用相对单位:

  • em:相对于其所使用的元素的字体大小。如果父元素的 font-size 为 16px,则 1em 等于 16px。如果父元素的大小发生变化,em 的大小也会发生变化。

    • 示例:
    p {
      font-size: 1.5em; /* 1.5 times the font size of the parent */
    }
    
  • rem(根em):相对于根元素(通常是元素)的字体大小。与 em 相比,这使其更具可预测性。

默认情况下,除非另有说明,浏览器通常将根字体大小设置为 16px。如果您为元素定义了自定义字体大小,则所有 rem 值都将根据该新大小进行计算。

  • 示例:

    p {
      font-size: 2rem; /* 2 times the root font size */
    }
    
    • %(百分比):相对于父元素的大小。例如,width: 50% 使元素宽度为其父容器的 50%。
  • 示例:

    div {
      width: 75%; /* 75% of the parent's width */
    }
    
    • vw(视口宽度)vh(视口高度):这些单位相对于浏览器的视口。 1vw 是视口宽度的 1%,1vh 是视口高度的 1%。
  • 示例:

    div {
      width: 50vw; /* 50% of the viewport's width */
    }
    

相对单位的优点:

  • 响应式设计:相对单位根据屏幕尺寸、字体大小或容器尺寸自动缩放,使您的设计更加灵活。
  • 更容易维护:更改根元素的字体大小(使用 rem)可以缩放整个设计。

缺点:

  • 可能更难控制:如果没有很好地理解继承以及大小如何通过元素级联,相对单位有时会产生意想不到的结果。

何时使用绝对单位与相对单位

  • 当您需要精确、固定的测量时,绝对单位(如 px)是最好的选择。当您希望某些东西在任何地方都具有相同的尺寸(例如,小徽标或图标)时,请使用这些。
  • 相对单位(如 em、rem、vw 和 %)非常适合响应式设计。它们允许元素根据屏幕尺寸或父元素进行缩放和调整,使您的设计更加灵活。

示例:实践中的绝对单位与相对单位

c9ccee2e6ea535a969eb3f532ad9fe89
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
531ac245ce3e4fe3d50054a55f265927

6cc3d199fb0d3b69ec9c4f1fd2e76527This is 24px text473f0a7621bec819994bb5020d29372a
6906c154dadd704568546404f68e14a4This is 1.5rem text (24px based on root size)473f0a7621bec819994bb5020d29372a

在此示例中:

  • 絶対フォント サイズ (24px) は常に同じです。
  • 相対フォント サイズ (1.5rem) は、ルート フォント サイズ (16px) に基づいて調整され、24px になります。

結論:

  • デバイス間での一貫性が必要な場合は、絶対単位を使用しますが、応答性が低いことに注意してください。
  • 特に複数の画面サイズやデバイス向けに開発する場合、より柔軟で応答性の高いデザインを実現するには、相対単位を使用します。

以上是CSS 中的绝对单位与相对单位的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn