在前端开发中，我们经常会使用 CSS 来设置元素的样式，其中单位是不可或缺的一部分。LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，提供了许多有用的特性，包括变量、混合、嵌套等。在 LESS 中，我们也可以使用常见的三种单位：px, rem, em。本文将介绍这三种单位的使用技巧比较。
px
px 是像素单位，它是相对于屏幕分辨率而言的。在设计稿中，我们通常会使用 px 来设置元素的尺寸和位置，因为它能够精确地控制元素的大小和位置。但是，使用 px 也有一些缺点：
- 不适合响应式布局。在不同的屏幕分辨率下，使用 px 设置的元素大小可能会有所不同，导致布局混乱。
- 不利于维护。如果需要修改元素的大小和位置，我们需要逐个修改每个元素的 px 值，非常麻烦。
以下是一个使用 px 设置元素大小和位置的示例代码：
.box {
width: 100px;
height: 100px;
margin: 10px 20px;
padding: 5px;
}rem
rem 是相对根元素（html 元素）字体大小的单位。如果根元素的字体大小为 16px，1rem 就相当于 16px。使用 rem 单位可以实现响应式布局，因为它相对于根元素的字体大小而言，根元素的字体大小是可以通过媒体查询来调整的。另外，使用 rem 单位也有以下优点：
- 方便维护。如果需要修改元素的大小和位置，我们只需要修改根元素的字体大小即可，非常方便。
- 更好的可访问性。使用 rem 单位可以让用户通过浏览器设置字体大小来改变整个页面的字体大小，从而提高可访问性。
以下是一个使用 rem 设置元素大小和位置的示例代码：
// javascriptcn.com 代码示例
html {
font-size: 16px;
}
.box {
width: 6.25rem; /* 100px / 16px = 6.25rem */
height: 6.25rem;
margin: 0.625rem 1.25rem; /* 10px / 16px = 0.625rem; 20px / 16px = 1.25rem */
padding: 0.3125rem; /* 5px / 16px = 0.3125rem */
}em
em 是相对于父元素字体大小的单位。如果父元素的字体大小为 16px，1em 就相当于 16px。使用 em 单位可以实现相对大小的设置，因为它相对于父元素的字体大小而言。但是，使用 em 单位也有一些缺点：
- 不适合响应式布局。和 px 单位一样，使用 em 设置的元素大小可能会在不同的屏幕分辨率下发生变化，导致布局混乱。
- 不利于维护。和 px 单位一样，如果需要修改元素的大小和位置，我们需要逐个修改每个元素的 em 值，非常麻烦。
以下是一个使用 em 设置元素大小和位置的示例代码：
// javascriptcn.com 代码示例
.parent {
font-size: 16px;
}
.child {
font-size: 0.875em; /* 14px / 16px = 0.875em */
width: 6.25em; /* 100px / 16px = 6.25em */
height: 6.25em;
margin: 0.625em 1.25em; /* 10px / 16px = 0.625em; 20px / 16px = 1.25em */
padding: 0.3125em; /* 5px / 16px = 0.3125em */
}总结
在实际开发中，我们可以根据实际情况选择合适的单位。如果需要精确控制元素的大小和位置，可以使用 px 单位；如果需要实现响应式布局，可以使用 rem 单位；如果需要实现相对大小的设置，可以使用 em 单位。不同的单位有不同的优缺点，我们需要根据实际情况进行选择。同时，为了方便维护和提高可访问性，我们建议尽量使用相对单位（rem, em）。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658283f1d2f5e1655dd9eaef