谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法，亲用有效。

来源：互联网发布：卡尔曼滤波算法应用编辑：程序博客网时间：2024/06/10 01:34

rem是css3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素字体大小就可以成比例地调整所有字体大小。我们可以巧妙地利用这一特性，实现页面自适应布局（尤其适合移动端适配）。

需求：当我们拿到一张设计稿，比如UI设计师设定的是iPhone6下的750px*1334px，那么我们应该如何实现适配iPhone5、iPhone4以及其他不同尺寸的屏幕？

有的伙伴也许想到了媒体查询，定制多套css样式。首先，我不否定这样做能实现，但这样的工作量还是比较大的，而且代码量也会很多，不利于性能优化。

以下介绍一种用JavaScript结合相对单位rem实现的方式。

①：在<head>里加上以下代码（设置viewpoint缩放为1.0）

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

②：编写脚本语言，动态设置根元素字体大小，其中designW为设计稿的宽度，其他值固定。

<script>    (function () {        var designW = 750;  //设计稿宽        var font_rate = 100;        //适配        document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";        document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";        //监测窗口大小变化        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {            document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";            document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";        }, false);    })();</script>

③：以上设置完成后，就可以根据设计稿的像素完成网页的编写，假设设计稿中的一张img的大小为200px*300px,那么样式设置成如下：
img{    width: 2rem; <!--(200/100)rem-->    height: 3rem; <!--(300/100)rem-->}

以上三步即可实现页面的只适应布局。（注：对图片清晰度要求较高）
iPhone6展示效果如下：
iPhone5展示效果如下：
ipad效果如下：
1920px*1080px等大屏幕展示效果如下：（显示也没问题，但建议用于自适应移动端，屏幕差别不算太大，展示更完美）。
各位有其他的好方法欢迎交流。

阅读全文

2 0