牛骨文教育服务平台(让学习变的简单)
博文笔记

rem布局--移动端页面自适应解决方案

创建时间:2016-03-25 投稿人: 浏览次数:619

只需在页面引入以下这段js代码,意思大概是:如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640) 。设置为100px是为了好换算,哈哈哈,引入后写css文件时,若设置宽度为640px,可写成6.4rem

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                scale = 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, scale, false);
            doc.addEventListener("DOMContentLoaded", scale, false);
        })(document, window);


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。