CSS单位有哪些？常用单位对比解析

一分耕耘，一分收获！既然都打开这篇《CSS单位有哪些区别？常用单位详解》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

CSS单位分绝对（如px、pt）和相对（如em、rem、vw、vh、%）两类，绝对单位固定大小，适合精确控制；相对单位基于参照对象，实现响应式布局。rem相对于根元素字体大小，避免嵌套问题，更适合全局响应式设计；vw/vh基于视口，但需注意滚动条和移动设备工具栏导致的计算偏差，可通过JavaScript、env()函数或calc()规避；此外，ex、ch用于字体排版，fr用于Grid布局中的弹性空间分配，特定场景有用但需考虑兼容性。

CSS单位种类繁多，主要区别在于它们如何衡量长度和大小，以及它们是否相对于其他元素或视口。理解这些区别对于精确控制网页布局至关重要。

解决方案

CSS单位可以分为绝对单位和相对单位两大类。

绝对单位

绝对单位基于物理测量，例如像素（px）、点（pt）、英寸（in）、厘米（cm）和毫米（mm）。它们的值是固定的，不会受到其他元素的影响。

• px (像素)：屏幕上显示的最小单位，是最常用的单位。1px通常对应于设备上的一个像素点。
• pt (点)：主要用于印刷，1pt等于1/72英寸。
• in (英寸)：物理长度单位，1in等于2.54厘米。
• cm (厘米)：物理长度单位。
• mm (毫米)：物理长度单位。

绝对单位的优点在于其精确性，适用于需要固定大小的元素。缺点是缺乏响应性，在不同设备上可能显示效果不一致。

相对单位

相对单位基于其他元素或视口的大小，例如em、rem、vw、vh、%等。它们的值会随着参考对象的变化而变化，从而实现响应式布局。

• em：相对于父元素的字体大小。例如，如果父元素的字体大小为16px，则1em等于16px。em可以嵌套使用，导致计算复杂，但在某些情况下非常有用。
• rem：相对于根元素（html）的字体大小。这使得rem成为创建一致比例布局的理想选择，避免了em的嵌套问题。
• vw (视口宽度)：相对于视口宽度的1%。例如，如果视口宽度为1000px，则1vw等于10px。
• vh (视口高度)：相对于视口高度的1%。例如，如果视口高度为800px，则1vh等于8px。
• % (百分比)：相对于父元素的尺寸。例如，如果父元素的宽度为500px，则width: 50%表示宽度为250px。

相对单位的优点在于其响应性，可以根据设备屏幕大小自动调整大小。缺点是计算相对复杂，需要仔细规划。

使用场景

• px：适用于需要精确控制元素大小，且不需要响应式布局的情况，例如边框、阴影等。也常用于定义字体大小，但在响应式设计中，建议使用相对单位。
• em：适用于与字体大小相关的属性，例如行高、内边距等。可以保持元素之间的比例关系。
• rem：适用于全局布局，例如定义字体大小、间距等。可以方便地调整整个网站的比例。
• vw/vh：适用于需要充满整个视口的元素，例如全屏背景图、全屏导航等。
• %：适用于需要根据父元素大小调整的元素，例如宽度、高度等。

如何选择合适的CSS单位？

选择合适的CSS单位取决于具体的需求。一般来说，在需要精确控制元素大小，且不需要响应式布局的情况下，可以使用绝对单位。在需要响应式布局的情况下，建议使用相对单位。

副标题1

为什么rem比em更适合用于响应式布局？

rem相对于根元素，这意味着整个网站的比例都可以通过修改根元素的字体大小来调整。这使得rem成为创建一致比例布局的理想选择。而em相对于父元素，容易出现嵌套问题，导致计算复杂。例如，如果父元素和子元素都使用em作为单位，修改父元素的字体大小会影响子元素的字体大小，这可能会导致布局混乱。 使用rem，只需要修改根元素的字体大小，就可以调整整个网站的比例，而不会影响其他元素的字体大小。例如：

html {
  font-size: 16px; /* 默认根元素字体大小 */
}

body {
  font-size: 1rem; /* body字体大小等于根元素字体大小，即16px */
}

h1 {
  font-size: 2rem; /* h1字体大小等于根元素字体大小的2倍，即32px */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* 在小屏幕上，根元素字体大小变为14px */
  }
}

在这个例子中，当屏幕宽度小于768px时，根元素的字体大小变为14px，body的字体大小变为14px，h1的字体大小变为28px。整个网站的比例都缩小了，从而实现了响应式布局。

副标题2

vw和vh在实际开发中有什么坑？如何避免？

虽然vw和vh很方便，但也有一些坑需要注意。例如，在某些浏览器中，vw和vh可能会包含滚动条的宽度和高度，导致元素超出视口。此外，在移动设备上，地址栏和工具栏可能会影响视口的高度，导致vh计算错误。

为了避免这些问题，可以使用以下方法：

1. 使用JavaScript获取视口大小：可以使用JavaScript获取视口的实际大小，然后根据实际大小计算元素的大小。

const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

const elementWidth = viewportWidth * 0.5; // 元素宽度为视口宽度的一半
const elementHeight = viewportHeight * 0.5; // 元素高度为视口高度的一半

2. 使用CSS env() 函数 (实验性)：CSS env() 函数允许你访问用户代理定义的环境变量，例如安全区域（safe area）的尺寸。可以使用safe-area-inset-* 变量来避免被状态栏或导航栏遮挡。

.element {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

3. 结合使用vw/vh和calc()函数：可以使用calc()函数来计算元素的实际大小，例如：

.element {
  height: calc(100vh - 50px); /* 元素高度为视口高度减去50px */
}

4. 使用媒体查询：可以使用媒体查询来针对不同的设备和屏幕大小设置不同的vw和vh值。

副标题3

除了em、rem、vw、vh，还有哪些不常用的CSS单位？它们的使用场景是什么？

除了em、rem、vw、vh，还有一些不常用的CSS单位，例如：

• ex：相对于当前字体的x-height。x-height是指小写字母x的高度。
• ch：相对于当前字体中“0”字符的宽度。
• fr：用于CSS Grid布局中，表示可用空间的一部分。

ex和ch的使用场景：

ex和ch主要用于排版，例如调整文本的间距、对齐等。由于不同字体的x-height和“0”字符的宽度可能不同，因此ex和ch的实际大小取决于字体。

fr的使用场景：

fr主要用于CSS Grid布局中，可以方便地创建灵活的网格布局。例如：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 创建三个列，宽度比例为1:2:1 */
}

在这个例子中，grid-container被分成了三个列，第一个列的宽度为可用空间的1/4，第二个列的宽度为可用空间的1/2，第三个列的宽度为可用空间的1/4。fr单位可以根据可用空间自动调整列的宽度，从而实现灵活的网格布局。

这些不常用的单位在特定场景下可能非常有用，但由于兼容性和可预测性问题，建议谨慎使用。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。