聊聊如何在响应式页面中使用 rem

主要观点总结

本文介绍了关于rem单位的问题，包括rem是什么、如何使用rem来解决移动端页面元素尺寸在不同设备宽度下表现不一致的问题，以及rem与px的区别。文章还介绍了如何使用css和js来调整html元素的大小以适应不同设备宽度。

关键观点总结

关键观点1: rem是一个相对于根元素字体大小的css单位，可以用来设置字体大小或长度单位。

根元素的字体大小决定了rem的换算公式。

关键观点2: rem与px的区别在于，rem是相对大小，而px是固定大小。

使用rem可以使页面元素尺寸在不同设备宽度下表现一致。

关键观点3: 设计稿尺寸与前端团队需要约定好rem的使用方式。

可以通过css或js来调整html元素的大小以适应不同设备宽度。

关键观点4: 使用rem适配的原理是调整html元素的字体大小，所有使用rem单位的元素都会相应变化。

需要根据设备宽度变化动态调整html字体大小。

关键观点5: 实践中的关键问题是要处理js加载比css慢导致页面元素闪烁的问题。

可以通过在css中给html元素设置默认值来弱化这个闪烁。

文章预览

有粉丝朋友问了我一个问题： 有一个 750 x 1500 尺寸的设计稿，设计稿上有一个 150 x 50 的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？ 他想到了要使用 rem。但具体如何使用，他还是一头雾水。因此跑来咨询我。 于是问题来了，rem 到底是什么？rem 是为了解决什么问题而存在的？rem 能够给我们带来什么样的便利？带着这样的问题，我们一起来总结一下 rem 的实践。 rem 是什么 rem 是一个相对于根元素字体大小的 css 单位。与 px 一样，他可以用来设置字体大小，也可以用来设置长度单位。 那相对于根元素字体大小是什么意思？ 举个栗子。在页面中，html 元素是根元素，因此我们首先给 html 设置一个字体大小 html { font-size:  100 px; } 于是，在整个页面中，就有这样的换算公式 1rem = 100px 所以如果一个按钮，有如下的 css 样式，就等同于 ………………………………