用rem编写移动端自适应网页

2021-07-05 06:27:26

rem与px 的换算

计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
举例元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem

移动端自适应网页的编写

自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <style>
                // 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
        html {
            font-size: 100px;
        }

        body {
            font-size: 16px;
        }

        h1 {
            font-size: 0.12rem;
        }
        // 试试手机为ip6plus和ip5时,div的宽高各是多少(px)
        div {
            width: 1rem;
            height: 1rem;
            background: gray;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <script>
        function resetWidth() {
            // 兼容ie浏览器 document.body.clientWidth
            var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
            console.log(baseWidth);
            // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
            document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
        }
        resetWidth();
        window.addEventListener('resize', function () {
            resetWidth();
        })
    </script>
    <div>
        内容
    </div>
</body>

</html>

码农公寓

rem与px 的换算

移动端自适应网页的编写

相关文章