js自适应rem -- 主要适用于移动端

来源：互联网发布：java io读取文件编辑：程序博客网时间：2024/05/16 04:04

参考：
关于em && rem单位
rem是如何实现自适应布局的？
Rem自适应js-优化flexible.js

更多。。。。

rem是指相对于根元素(html)的字体大小的单位, 利用它能实现强大的屏幕适配布局。下面主要应用的是基于js去调整根元素字体大小，从而实现各个尺寸屏幕的适配；

//designWidth:设计稿的实际宽度值，需要根据实际设置//maxWidth:制作稿的最大宽度值，需要根据实际设置//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750);(function(designWidth, maxWidth) {    var doc = document,    win = window,    docEl = doc.documentElement,    remStyle = document.createElement("style"),    tid;    function refreshRem() {        var width = docEl.getBoundingClientRect().width;        maxWidth = maxWidth || 540;        width>maxWidth && (width=maxWidth);        var rem = width * 100 / designWidth;        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';    }    if (docEl.firstElementChild) {        docEl.firstElementChild.appendChild(remStyle);    } else {        var wrap = doc.createElement("div");        wrap.appendChild(remStyle);        doc.write(wrap.innerHTML);        wrap = null;    }    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；    refreshRem();    win.addEventListener("resize", function() {        clearTimeout(tid); //防止执行两次        tid = setTimeout(refreshRem, 300);    }, false);    win.addEventListener("pageshow", function(e) {        if (e.persisted) { // 浏览器后退的时候重新计算            clearTimeout(tid);            tid = setTimeout(refreshRem, 300);        }    }, false);    if (doc.readyState === "complete") {        doc.body.style.fontSize = "16px";    } else {        doc.addEventListener("DOMContentLoaded", function(e) {            doc.body.style.fontSize = "16px";        }, false);    }})(750, 750);

使用方法：

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

注： html font-size字体大小 = 设备宽度 / (设计图尺寸 / 100);
假设提供的设计稿为750PX的，那么：
deviceWidth = 320，font-size = 320 / 7.5 = 42.6666px
deviceWidth = 375，font-size = 375 / 7.5= 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5 = 66.6666px

实际应用：假设有一个750的设计稿分上中下三个部分，上（650＊80），中（左边：200＊130，右边：420 ＊ 130），下（650 ＊ 200）

则实现代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta content="black" name="apple-mobile-web-app-status-bar-style">    <meta content="telephone=no" name="format-detection">    <meta content="email=no" name="format-detection">    <meta name="keywords" content="" />    <title>rem demo</title>    <link rel="stylesheet" href="base.css">    <script type="text/javascript">        ;        (function(designWidth, maxWidth) {            var doc = document,                win = window,                docEl = doc.documentElement,                remStyle = document.createElement("style"),                tid;            function refreshRem() {                var width = docEl.getBoundingClientRect().width;                maxWidth = maxWidth || 540;                width > maxWidth && (width = maxWidth);                var rem = width * 100 / designWidth;                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';            }            if (docEl.firstElementChild) {                docEl.firstElementChild.appendChild(remStyle);            } else {                var wrap = doc.createElement("div");                wrap.appendChild(remStyle);                doc.write(wrap.innerHTML);                wrap = null;            }            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；            refreshRem();            win.addEventListener("resize", function() {                clearTimeout(tid); //防止执行两次                tid = setTimeout(refreshRem, 300);            }, false);            win.addEventListener("pageshow", function(e) {                if (e.persisted) { // 浏览器后退的时候重新计算                    clearTimeout(tid);                    tid = setTimeout(refreshRem, 300);                }            }, false);            if (doc.readyState === "complete") {                doc.body.style.fontSize = "16px";            } else {                doc.addEventListener("DOMContentLoaded", function(e) {                    doc.body.style.fontSize = "16px";                }, false);            }        })(750, 750);    </script>    <style media="screen">        html,        body {            margin: 0;            padding: 0;        }        .header {            width: 6.5rem;            height: 0.8rem;            background: red;            margin: 0 auto 0.2rem;        }        .body {            width: 6.5rem;            height: 3rem;            background: blue;            overflow: hidden;            margin: 0 auto;            margin-bottom: 0.2rem;        }        .body_left {            width: 2rem;            height: 3rem;            background: #eb4509;            float: left;        }        .body_right {            width: 4.2rem;            height: 3rem;            background: green;            margin-left: 0.3rem;            float: left;        }        .footer {            width: 6.5rem;            height: 2rem;            background: purple;            margin: 0 auto;        }    </style></head><body>    <!-- 正文 -->    <div class="container">        <div class="header">        </div>        <div class="body">            <div class="body_left">            </div>            <div class="body_right">            </div>        </div>        <div class="footer">        </div>    </div></body></html>

效果如下图所示：
这里写图片描述

这样不论我们屏幕的尺寸怎么变化，我们画好的页面总是能按照定好的比例调整；

阅读全文

1 0