聊聊如何在响应式页面中使用 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元素设置默认值来弱化这个闪烁。

免责声明