CSS布局单位的演变与应用：从像素到根据根元素字体大小的相对单位

2024-01-08 15:16:07 前端笔记 134

从px到rem：CSS布局单位的演变与应用

在前端开发中，我们经常需要用到CSS来实现页面布局。在过去的几年间，CSS布局单位也经历了演变和发展。最开始我们使用的是像素（px）作为单位来设置元素的大小和位置。然而，随着响应式设计的兴起和移动设备的普及，像素单位逐渐暴露出一些问题。为了解决这些问题，新的单位rem应运而生，并逐渐被广泛应用于CSS布局中。

一、像素单位(px)的局限性
1.1 固定大小
作为最早被广泛使用的单位，像素单位在布局中具有固定大小的特性。这意味着当页面在不同设备或不同屏幕尺寸上展示时，像素单位的大小不会自适应，导致页面布局出现错乱或无法显示完整。

1.2 高分辨率设备问题
随着高分辨率设备的普及，如Retina屏幕，像素单位的缺点更为明显。当在高分辨率设备上显示低像素单位设置的元素时，会导致像素化或者显示模糊，影响用户体验。

1.3 编辑复杂
像素单位需要根据设备的分辨率进行调整，这就意味着在编写CSS时需要考虑不同设备的像素密度，增加了编写和维护代码的复杂度。

二、rem单位的介绍
2.1 什么是rem
rem是相对单位，表示相对于根元素（html）的字体大小的单位。它的大小是相对于根元素的字体大小而言的。当我们设置根元素的字体大小为16px时，1rem等于16px。

2.2 rem的优点

自适应布局：使用rem单位可以根据根元素的字体大小自适应调整，从而在不同设备上实现布局的灵活变化。
解决高分辨率设备问题：由于rem是相对单位，不受设备像素密度的影响，可以实现在不同分辨率下保持一致的布局效果。
简化代码编写：使用rem单位可以简化代码的编写，不再需要考虑不同设备的像素密度问题。

三、如何使用rem单位
3.1 设置根元素的字体大小
在使用rem单位之前，需要首先设置根元素的字体大小。通常情况下，我们会将根元素的字体大小设置为16px，即1rem=16px。

html {
  font-size: 16px;
}

3.2 使用rem单位
一旦设置了根元素的字体大小，就可以在其他元素中使用rem单位进行布局。

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

四、动态改变根元素的字体大小
4.1 媒体查询
通过媒体查询可以根据不同的屏幕尺寸动态的改变根元素的字体大小。

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 JavaScript动态计算
使用JavaScript可以根据屏幕尺寸动态计算根元素的字体大小。

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

五、
通过使用rem单位，我们可以实现响应式布局，解决不同设备上的布局问题。使用rem单位可以使我们的布局更加灵活自适应，同时简化代码编写。在实际项目中，我们应该根据实际需要选择合适的布局单位，合理使用rem单位来实现更好的用户体验。