利用flexible.js和VSCode插件cssrem进行可伸缩布局方案

Baker-Chen

已于 2022-09-05 15:02:11 修改

阅读量4.9k

点赞数 4

文章标签：前端 javascript

于 2022-04-04 14:10:56 首次发布

本文链接：https://blog.csdn.net/m0_51969330/article/details/123952758

版权

前端响应式布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用flexible.js和cssrem实现前端响应式布局。通过修改flexible.js将屏幕划分为24等份，并详细展示了配置过程。同时，介绍了VSCode插件自动转换px为rem的方法，确保在不同设备上保持样式一致性。最后，给出了一个实际案例，展示了在页面中应用这些技术的代码片段。

摘要由CSDN通过智能技术生成

🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路：前端之行，任重道远（来自大三学长的万字自述）
🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）
🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用（点击跳转）🍬

1. flexible.js

flexible原理就是根据不同的屏幕宽度动态的设置网页中html根节点的font-size，然后咱们将所有的px用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。

GItHub地址
在这里插入图片描述
flexible默认配置是将屏幕宽度分成10等份，如果需要自己手动修改可直接复制index.js的代码到本地使用，如果不需要修改，可直接使用index.min.js里已经压缩过的代码。

这里我需要将屏幕宽度改成等分24等份，所以使用index.js里未压缩的代码，方便自己修改:

(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() {
        var rem = docEl.clientWidth / 10
        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))

这个代码就是仓库里index.js的代码，大家也可以直接复制这个代码去项目使用，针对我的需求将屏幕划分成24等份，只需修改：

    // set 1rem = viewWidth / 24 此时把屏幕平均划分为24等分
    function setRemUnit() {
        var rem = docEl.clientWidth / 24
        docEl.style.fontSize = rem + 'px'
    }

然后去项目里引用该js文件即可：

  <script src="js路径"></script>

然后配合cssrem使用

2. cssrem

下载aaVScode插件：
在这里插入图片描述

进入插件扩展设置进行配置：
在这里插入图片描述
这里我将基准改为了80，对于80是怎么来的，是因为我是针对1920px的设计稿进行开发，并且将flexible手动修改了24等份，1920/24=80，所以这里我设置为了80，具体设置可根据自己的需求以及flexible的配置进行修改。

然后在项目里使用时，该插件就会自动提示将px单位转为rem单位：
在这里插入图片描述
这里是说在我的配置下200px等于2.5rem，然后我选择它使用rem单位即可
注意：不使用rem单位是无法进行可伸缩适配的

这样下来项目就可以适配不同大小的屏幕了！

3. 案例展示

<!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>echarts数据可视化</title>
    <script src="./js/echarts.min.js"></script>
    <!-- 利用flexible.js适配屏幕：flexible.js配置中我们将屏幕划分成了24等分 -->
    <script src="js/flexible.js"></script>
    <style>
        /* 屏幕宽度小于1024px后固定单位 因为项目配置是将屏幕划分成24等分，所以是1024/24=42.66 */
        
        @media screen and (max-width:1024px) {
            html {
                font-size: 42.66px !important;
            }
        }
        /* 屏幕宽度大于1920px后固定单位 因为项目配置是将屏幕划分成24等分，所以是1920/24=80 */
        
        @media screen and (min-width:1920px) {
            html {
                font-size: 80px !important;
            }
        }
        
        .box {
            width: 2.5rem;
            height: 2.5rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>