CSS中的相对单位和绝对单位,以及rem自适应布局

夜色温柔 2024-07-03 ⋅ 11 阅读

在开发网页时,我们经常需要使用 CSS 来定义元素的样式。CSS 中的单位可以分为相对单位和绝对单位两种类型。同时,为了让网页在不同设备上展示更好的自适应效果,我们还可以使用 rem 单位来实现自适应布局。

相对单位

相对单位是根据其他元素或者视口大小来计算的单位。它们的值相对于父元素的大小或者整个视口的大小。

em

em 是相对于当前元素的字体大小来计算的单位。当设置一个元素的 font-size1em 时,它将与其父元素的字体大小相等。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 与父元素的字体大小相等,即 16px */
}

rem

rem 是相对于根元素(<html>)的字体大小来计算的单位。通过在根元素上设置 font-size,可以统一调整整个页面中所有 rem 单位的大小。

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem; /* 与根元素的字体大小相等,即 24px */
}

绝对单位

绝对单位是固定的单位,它们的值是一个固定的长度。无论元素的其他属性如何变化,它们的值始终保持不变。

px

px 是最常用的绝对单位,表示像素(pixel)。它的值是一个固定的长度,不会随着其他属性的变化而改变。

.child {
  font-size: 16px;
  width: 200px;
  height: 150px;
}

cm、mm、in、pt、pc

除了 px,CSS 还提供了一些其他的绝对单位,如 cm(厘米)、mm(毫米)、in(英寸)、pt(点)和 pc(派卡)。这些单位可以根据实际需要选用,但在 Web 开发中很少使用。

rem 自适应布局

在移动设备上,由于屏幕的大小和分辨率各不相同,为了实现更好的自适应效果,我们可以使用 rem 单位来定义元素的大小和间距。

通常情况下,我们会将根元素的 font-size 设置为屏幕宽度的一个百分比值,以实现根据屏幕大小调整元素大小的效果。通过 JavaScript 可以动态地根据屏幕宽度设置根元素的 font-size

function setFontSize() {
  var root = document.documentElement;
  var screenWidth = root.clientWidth;

  root.style.fontSize = screenWidth * 0.01 + 'px';
}

window.addEventListener('resize', setFontSize);

在 CSS 中使用 rem 单位时,可以根据根元素的实际大小,设置其他元素的大小和间距。

html {
  font-size: 16px; /* 假设根元素的初始大小为 16px */
}

.child {
  font-size: 1.5rem; /* 相当于 24px */
  width: 10rem; /* 相当于 160px */
  margin-bottom: 2rem; /* 相当于 32px */
}

通过使用 rem 单位,我们可以实现不同设备上的自适应布局,提升用户体验。

总结来说,CSS 中的单位可以分为相对单位和绝对单位两种类型。相对单位(如 emrem)可以根据其他元素或者视口大小来计算,而绝对单位(如 pxcmin)的值是固定的。通过在移动设备上使用 rem 单位,并动态设置根元素的 font-size,我们可以实现自适应布局,适应不同屏幕大小的设备。


全部评论: 0

    我有话说: