在前端开发中，我们通常使用 CSS 中的 px 单位来设置尺寸和距离。然而，px 单位在不同分辨率的屏幕上表现，并不一致，导致很难适配不同设备的屏幕。因此，一些开发者开始使用 rem 或者 SASS 中的 mixin 来设置尺寸和距离。本文将从 SASS 和 CSS 中的 rem 单位使用对比来探讨它们的优缺点，以及如何更好地使用这两种方法。
rem 单位的基础
rem 是根据根据 html 元素的字体大小来计算的单位，1rem 等于 html 元素的字体大小。rem 单位的优点在于：相对于 px 单位，它可适配不同尺寸和分辨率的屏幕，而且可以方便地进行动态调整。特别是在移动端开发中，使用 rem 单位更为方便。
CSS 使用 rem 单位的示例代码
---- - ---------- ----- - ---- - ---------- ----- ------- -- -------- -- -
以上代码中，我们设置了 html 元素的字体大小为 16px，这时候 1rem 就等于 16px，从而保证了整个页面的字体大小一致。在 body 标签中，我们设置字体大小为 1rem，从而让其他元素单位都基于 html 根元素字体大小来计算。
SASS 中的 mixin
SASS 中提供了一个非常方便的 mixin，可以用来根据屏幕大小动态地设置字体大小和元素尺寸。这个 mixin 的核心是使用 rem 单位来计算元素大小，从而让元素尺寸随着屏幕大小变化而变化。
SASS mixin 使用的示例代码
------ --------------------- -------- -
----- ------------ ------ -- ------- -
------ ----------- ------------ -
------------- ------ - ----
-
-
-
----------- -
------- -----
-------- ------------------- -
------ -----
------- ----
---
-以上代码中，我们定义了一个 mixin 名为 responsive，它接受两个参数 $property 和 $values。$property 参数表示需要设置的 CSS 属性，如 width、height 等，而 $values 则是一个 map 类型，用来定义在不同屏幕宽度下 $property 的取值。
在 .my-element 类中，我们使用了 responsive mixin 来设置 width 的值，其中 map 的键是屏幕宽度，而值则是对应 $property 的取值。在这个例子中，我们定义了在屏幕宽度分别为 320px 和 1024px 时，宽度的取值分别为 100% 和 50%。
SASS 和 CSS 中 rem 单位的比较
在比较 SASS 和 CSS 中 rem 单位的使用时，我们可以从以下角度出发。
对于 CSS 微调的支持力度
使用 SASS mixin 可以让我们在不同的屏幕宽度上微调 UI 元素的大小，这显然是在 CSS 中使用 rem 单位无法实现的。如果我们的项目需要特别强的 UI 美观性能调整性，那么建议使用 SASS mixin 。
开发者的适应和熟练度
在适应和熟练度方面，使用 CSS 中的 rem 单位更为简单易懂，就是普通样式的设定而已。而对于 SASS 中的 mixin，需要熟练掌握 mixin 的使用方法以及 CSS 属性的变化伴随 mixin 参数的变化。因此，在熟悉程度上，使用 CSS 的 rem 单位更为优势。
功能性的比较
SASS mixin 可以根据屏幕大小自动计算元素大小，并且支持微调。因此，如果我们需要设计更为复杂的 UI，建议使用 SASS mixin ，而不是使用 CSS 中的 rem 单位。当然，对于简单的文档页面等，使用 CSS 中的 rem 单位就足够了。
总体建议
总的来说，我们可以建议在不同情况下采用不同的方法：如果是一个简单的文本页面，使用 CSS 中的 rem 单位即可；如果是一个复杂的 UI 设计，建议使用 SASS mixin 来实现动态调整和微调。不过对于初学者，我们建议先学会 CSS 中的 rem 单位，然后再逐渐了解 SASS，这样可以更快进行一些简单的样式设计。
结论
在前端开发中，使用 rem 单位可以方便地适应不同分辨率和设备的屏幕，但是在实际使用中需要谨慎，在不同的情况下采用不同的方法。如果我们需要对 UI 元素进行微调或者开发复杂的 UI 设计，可以使用 SASS 中的 mixin 来实现。如果是简单的文本页面设计，则可以选用 CSS 中的 rem 单位进行设计。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ee385677d675cfffd4054c