移动端rem 解决方案

最新推荐文章于 2024-03-13 14:35:41 发布

HEI_RAO

最新推荐文章于 2024-03-13 14:35:41 发布

阅读量256

点赞数

分类专栏：前端文章标签： rem 自适应

本文链接：https://blog.csdn.net/qq_25504271/article/details/78813791

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>