关于rem布局以及sprit雪碧图的移动端自适应

一、简介

　　早在仁医医疗科技的工作的时候因为要开发微信服务号就接触过rem布局适配移动端。不过当时也是半摸索状态，实际做出来的效果也还不错。基本能适配大部分移动屏幕，而且方法原理也不难理解。但是后面一段时间没用之后又忘记了。刚好最近又上手小程序，于是又翻出这个知识点来。不过由于时间原因，就直接说重点。基础知识网上有很多。

二、代码实例

　　该段代码主要用flex布局和rem布局相结合，另外通过引入rem自适应js，通过监听window的resize事件触发htm根元素的字体计算。

<!doctype HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta content="telephone=no" name="format-detection" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
    <title>lib.flexible 简化版</title>
    <script type="text/javascript" src="../demo/js/flex.js"></script>
</head>
<body>
    <div class="container">
        <h2>公租房当前遇到的六大难题</h2>
        <ul class="list">
            <li>
                <span class="icon"></span>
                <div>
                    <h3>规范化管理不到位</h3>
                    <p>房屋档案信息不规范完善，房间分配额不够，出现恶意多次申请、假合同事件、到期赖房不肯搬走现象</p>
                </div>
            </li>
            <li>
                <span class="icon"></span>
                <div>
                    <h3>治安环境脏乱差</h3>
                    <p>居住人员成分复杂，小区内环境脏乱，扯摊支铺现象屡禁不止，导致公租房治安环境较差</p>
                </div>
            </li>
            <li>
                <span class="icon"></span>
                <div>
                    <h3>租户服务体验感差</h3>
                    <p>申请人需多次跑审查点递交材料；且无法及时知晓申请状态；租金等费用需现场缴纳；只能通过电话报修</p>
                </div>
            </li>
            <li>
                <span class="icon"></span>
                <div>
                    <h3>租金收取难度大</h3>
                    <p>因配租家庭收入偏低、催缴租金找人难。租户欠缴租金，追缴困难、水电费上门抄表，耗费人力物力</p>
                </div>
            </li>
            <li>
                <span class="icon"></span>
                <div>
                    <h3>违规转租转让转借问题突出</h3>
                    <p>转租现象无法杜绝，入住人员身份无法验证，租期到期退租难，转租、转让、转借给他人谋利现象突出</p>
                </div>
            </li>
            <li>
                <span class="icon"></span>
                <div>
                    <h3>特殊人权服务不到位</h3>
                    <p>公租房小区还居住着不少独居老人，因其年龄等的特殊性，如何服务这部分特殊群体一直没有好办法</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

　　引入的js

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

三、重点

　　1、background-size:使用雪碧图的长宽（rem单位的）

　　 2、节流防抖函数还没有做。是相对精简版的js

　　 3、还有些细节待完善

关于rem布局以及sprit雪碧图的移动端自适应

猜你喜欢