专栏名称: 这波能反杀
往者不可谏,来者犹可追
目录
今天看啥  ›  专栏  ›  这波能反杀

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

这波能反杀  · 公众号  · 前端  · 2024-08-18 23:27
    

主要观点总结

本文介绍了关于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元素设置默认值来弱化这个闪烁。


免责声明

免责声明:本文内容摘要由平台算法生成,仅为信息导航参考,不代表原文立场或观点。 原文内容版权归原作者所有,如您为原作者并希望删除该摘要或链接,请通过 【版权申诉通道】联系我们处理。

原文地址:访问原文地址
总结与预览地址:访问总结与预览
推荐产品:   推荐产品
文章地址: 访问文章快照