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

来源:互联网 发布:java脱产培训班 编辑:程序博客网 时间:2024/04/27 16:18

只需在页面引入以下这段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);


0 0
原创粉丝点击