根据iPhone6设计稿动态计算rem值

最新推荐文章于 2025-08-18 20:43:51 发布

原创

最新推荐文章于 2025-08-18 20:43:51 发布 · 1.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#rem #iphone6 #javascript #font-size

在移动端H5开发中，为了实现自适应，通常会使用rem单位。本文介绍如何通过JavaScript根据iPhone6的设计稿尺寸动态计算并设置html元素的font-size，从而实现连续的rem值，简化代码并提高适配效果。建议将相关JavaScript代码置于页面<head>部分。

rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size 值很繁琐，而且值也不能达到连续的效果。

就使用js动态计算给文档的fopnt-size 动态赋值解决问题。

使用的时候，请将下面的代码放到页面的顶部（head标签内）；

/**
 * [以iPhone6的设计稿为例js动态设置文档 rem 值]
 * @param  {[type]} currClientWidth [当前客户端的宽度]
 * @param  {[type]} fontValue [计算后的 fontvalue值]
 * @return {[type]}     [description]
 */
<script>
    var currClientWidth, fontValue,originWidth;
    //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）
    originWidth=375;
    __resize();

    //注册 resize事件
    window.addEve