移动端rem配置

最新推荐文章于 2024-05-17 17:40:41 发布

黑猫几绛

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量416

点赞数

本文链接：https://blog.csdn.net/flow_camphor/article/details/119900191

版权

本文介绍了如何获取当前屏幕宽度，并利用JavaScript动态设置根元素的字体大小，实现1rem等于屏幕宽度的10%。通过设置body内字体大小为16px，确保字体继承的默认值。这种方法常用于响应式网页设计，以实现不同设备上的良好屏幕适配。

摘要由CSDN通过智能技术生成

// 获取当前屏幕宽度
// 通常使用meta[name="viewport"]标签让布局视口和视觉视口等宽
const width = document.documentElement.clientWidth

// 我们都知道em是相对于父元素的font-size大小来设置
// rem(root em)则是相当于根元素的font-size 
// 这里让1rem等于屏幕百分之十的宽度
document.document.documentElement.style.fontSize = width / 10 + "px"

// 因为字体大小会进行样式继承
// 因此重置body内部字体大小，重新让字体变回默认值
document.body.style.fontSize="16px"