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计算错误。
为了避免这些问题，可以使用以下方法：
- 使用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; // 元素高度为视口高度的一半
-
使用CSS
env()
函数 (实验性)：CSSenv()
函数允许你访问用户代理定义的环境变量，例如安全区域（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);
}- 结合使用vw/vh和calc()函数：可以使用calc()函数来计算元素的实际大小，例如：
.element {
height: calc(100vh - 50px); /* 元素高度为视口高度减去50px */
}- 使用媒体查询：可以使用媒体查询来针对不同的设备和屏幕大小设置不同的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单位可以根据可用空间自动调整列的宽度，从而实现灵活的网格布局。
这些不常用的单位在特定场景下可能非常有用，但由于兼容性和可预测性问题，建议谨慎使用。
