移动端rem适配

雪酒呀

于 2021-11-29 14:43:39 发布

阅读量620

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue js面向对象微信小程序文章标签：进制转换 echarts javascript

本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/121609606

微信小程序同时被 3 个专栏收录

32 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

js面向对象

13 篇文章

订阅专栏

本文介绍了rem单位在网页设计中的应用，如何通过计算屏幕宽度并动态设置html字体大小来实现页面的自适应设计。通过实例演示了如何利用750px设计稿进行1rem的换算，使得设计在不同设备上都能保持良好布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem

rem是一种单位，等同于html跟元素的字体大小，比如html设置字体为20px，那么1rem等于20px，2rem=40px

动态计算html的字体大小

拿到屏幕宽度
计算字体大小
设置根元素的字号

var windowWidth = document.documentElement.getBoundingClientRect().width;
console.log("屏幕宽度", windowWidth);
        // 字体大小
var fontsize = windowWidth / 37.5
console.log("字体大小", fontsize);
 document.documentElement.style.fontSize = fontsize + 'px';