rem实现屏幕适配（jQuery）

news2024/11/28 16:50:05

一、rem换算

1.根据视口宽度动态计算字体大小，如果宽度大于750px，则将字体大小设置为100px，否则按比例缩小。
tips:使用时记得引入jQuery.js

        //  在文档加载完成后执行函数，确保DOM已经准备就绪
        $(function () {
            // 定义一个自执行的函数，参数n代表document，e代表window 
            !function (n, e) {
                // 获取文档的根元素，也就是html元素
                var t = n.documentElement,
                    // 判断设备是否支持orientationchange事件，支持则使用该事件，否则使用resize事件
                    i = "orientationchange" in window ? "orientationchange" : "resize",
                    // 定义一个函数，用于调整根元素的字体大小
                    d = function () {
                        // 获取设备视口宽度
                        var n = t.clientWidth;
                        //    根据视口宽度调整字体大小，确保字体大小不超过100px
                        n && (t.style.fontSize = (n > 750 ? 750 : n) / 750 * 100 + "px")
                    };
                // 如果浏览器支持addEventListener方法，则添加事件监听器 
                n.addEventListener && (e.addEventListener(i, d, !1), d(), n.addEventListener("DOMContentLoaded", d, !1))
            }(document, window);
        })

2.效果演示
在这里插入图片描述

二、vscod中安装px to rem & rpx & vw (cssrem)插件

1.安装px to rem & rpx & vw (cssrem)插件
在这里插入图片描述
2.配置该插件

3.使用插件
编写css样式时可正常使用px，插件会根据前面的设置自动换算

三、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test {
            width: 1rem;
            height: 1rem;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="test"></div>
    <script src="./jquery-1.10.2.js"></script>
    <script>
        //  在文档加载完成后执行函数，确保DOM已经准备就绪
        $(function () {
            // 定义一个自执行的函数，参数n代表document，e代表window 
            !function (n, e) {
                // 获取文档的根元素，也就是html元素
                var t = n.documentElement,
                    // 判断设备是否支持orientationchange事件，支持则使用该事件，否则使用resize事件
                    i = "orientationchange" in window ? "orientationchange" : "resize",
                    // 定义一个函数，用于调整根元素的字体大小
                    d = function () {
                        // 获取设备视口宽度
                        var n = t.clientWidth;
                        //    根据视口宽度调整字体大小，确保字体大小不超过100px
                        n && (t.style.fontSize = (n > 750 ? 750 : n) / 750 * 100 + "px")
                    };
                // 如果浏览器支持addEventListener方法，则添加事件监听器 
                n.addEventListener && (e.addEventListener(i, d, !1), d(), n.addEventListener("DOMContentLoaded", d, !1))
            }(document, window);
        })
    </script>
</body>

</html>