关于rem 针对设计稿宽度，设计rem调试比例

本文链接：https://blog.youkuaiyun.com/weixin_54500649/article/details/112635747

本文介绍了rem作为适配单位在前端移动适配中的应用，详细阐述了如何根据设计稿宽度设定html的font-size，通过调整设备宽度与设计稿宽度的比例来实现不同设备上的相同视觉效果。关键在于使用js动态设置html的font-size，以保证适配效果。

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

关于rem 针对设计稿宽度，设计rem调试比例

一、什么是rem？

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

二、根据设计稿，设计rem调配比例

设计稿宽度：500px

移动设备：500px

设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px

设置一个盒子的宽度: width=1rem（即100px），此时这个盒子屏占比为：1/5。

当相同的代码运行在屏幕为300px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 50px，渲染出来的盒子就是1rem = 50px,这个盒子屏占比同样为：1/5。以此达到移动适配的效果

可以看出适配的的关键就在于js设置html的font-size: font-size= 移动设备 / 设计稿宽度 * 100。那么这个公式怎么来的呢？

首先移动设备 / 设计稿宽度是渲染效果相对于设计稿的缩放比

然后移动设备 / 设计稿宽度 * 100 乘以100是为了把font-size(=rem)放大100倍，因为当font-size小于浏览器支持最小字体大小的时候，浏览器会把fon-size默认为最小字体大小。也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。

三、如何设置html的font-size大小

例如：设计稿为750px；当设备大于750px时，渲染比例1:1，当小于750px时，按照相应的比例缩小

var qyp = document.documentElement.clientWidth; 
if (qyp > 750) { 
    qyp = 750; 
} 
document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 750) + 'px'