前端移动端的rem适配计算原理

最新推荐文章于 2025-05-26 10:48:05 发布

weixin_30800807

最新推荐文章于 2025-05-26 10:48:05 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript ui ViewUI

原文链接：http://www.cnblogs.com/muamaker/p/11202628.html

本文详细介绍了前端移动端rem适配的计算原理，从rem单位的定义到实际应用中的放大比例计算规则，并提供了js、css calc、less和scss等多种适配方案的示例，帮助开发者理解并实现响应式布局。

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

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

计算原理：

1 屏幕宽为 clientWidth(px)。设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px);单位化简===> n= clientWidth/750 ;
2 将 html的 font-size: n(px);
3 则有 n(px) = 1(rem) ,因为1rem为根节点(html节点)字体的大小一倍;
4 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);
5 则需要写入的宽度 width: 设为 w (单位暂不确定)
6 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750
7 化简 w = (clientWidth/750)*ruleW(px)