移动端rem 解决方案

来源：互联网发布：淘宝客服兼职日结工资编辑：程序博客网时间：2024/05/22 14:33

JS代码

//orientationchange方向改变事件(function (doc, win) {    var docEl = doc.documentElement,//根元素html        //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',        recalc = function () {            var clientWidth = docEl.clientWidth;            if (!clientWidth) return;            //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';        };    //alert(docEl)    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值    doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间})(document, window);//alert(document.documentElement.clientWidth/320)

HTML

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />    <meta content="telephone=no" name="format-detection" />    <meta name="format-detection" content="email=no" />    <meta http-equiv="Cache-Control" content="no-cache"/>    <title>GOIM</title>    <style>        html {            font-size: 20px;            width: 100%;            height: 100%;        }        body{            margin: 0;            padding:0;        }    </style></head><body><div style="width: 16rem;height: 3rem;background-color: red"></div></body></html>

阅读全文

0 0