对单位可以帮助我们在不同的屏幕和浏览器上实现一致的排版效果。具体地说,em 和 rem 是相对于父元素或根元素字体大小的单位,vw 和 vh 是相对于视口尺寸的单位。
要使用这些相对单位,首先需要设置合适的基准值。通常情况下,我们将根元素的 font-size
设置为 16px 或 10px,然后根据设计稿确定其他元素的字体大小和尺寸。接着,可以使用 CSS 定义样式时为元素设置这些相对单位。
例如,如果想让某个元素的宽度始终是视口宽度的一半,可以写成 width: 50vw;
;如果想让一个段落的行高是其字体大小的 1.5 倍,可以写成 line-height: 1.5em;
;如果想让一个标题的字体大小是根元素字体大小的 2 倍,可以写成 font-size: 2rem;
。
需要注意的是,使用 em 和 rem 时,如果父元素或祖先元素的字体大小发生变化,子元素的大小也会相应地改变。而使用 vw 和 vh 时,则是相对于整个视口来计算大小,因此不会受到任何元素或字体大小的影响。