flexible.js+rem解决pc端适配

最新推荐文章于 2024-04-29 11:17:53 发布

Э时间行者于我

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量2.8k

点赞数 3

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_45094682/article/details/112986470

版权

第一步：新建 `flexible.js`文件

这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        // 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）
        var rem = docEl.clientWidth / 24;
        docEl.style.fontSize = rem + "px";
    }

    setRemUnit();

    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            setRemUnit();
        }
    });

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);

第二步：去vscode下载一个less转css插件

less
less002

第三步：新建一个`index.less`文件，写完直接保存就有对应的css了

#box{
    background-color: pink;
    height: 4rem;
    width: 4rem;
    .main{
        color: aqua;
        font-size: 0.26rem;
    }
}

第四步：在项目中引用css、js文件

ps：引入css时，直接用当前less的前缀名就可以，后缀名还是`.css`，这样确保你引入的css文件是正确的，防止引入的css文件名不正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexible+rem</title>
    <!-- 引入css，跟less名字是一样的，会自动生成 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="box">
        flexible.js+rem解决pc端适配
        <div class="main">
            嘿哈
        </div>
    </div>
    <!-- 引入js -->
    <script src="./js/flexible.js"></script>
</body>
</html>

最后来看一下是否成功引入,如果看到我这样的就大功告成了！

less00

Э时间行者于我

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
flexible.js+rem解决pc端适配

第一步：新建 flexible.js文件这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontS
复制链接

扫一扫