模拟flexible.js 前端开发中的大屏布局方案

原创已于 2025-04-30 11:09:26 修改 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #弹性布局

于 2025-04-30 10:59:33 首次发布

flexiable.js

参考

模拟实现
index.html 里设置

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 </head>
<script>
    function setRootFontSize () {
        /*获取屏幕的宽度*/
        let width = document.documentElement.clientWidth || document.body.clientWidth
        /*判断屏幕的宽度是否小于414*/
        if (width < 414) {
            document.documentElement.style.fontSize = '13px'
        } else {
            document.documentElement.style.fontSize = width / 135.9 + 'px'
        }
    }
    /*设置字体大小*/
    setRootFontSize()
    /*绑定页面的resize事件来，使屏幕变化时更新html的font-size*/
    window.addEventListener('resize', function () {
        setRootFontSize()
    }, false)
</script>

使用scss工具，引入函数

@function px2rem($value) {
  // 在这里进行数学计算
  $result: $value / 14; // 例如，将值乘以1.5
  // 使用 round() 函数来保留两位小数
  $rounded_result: round($result, 2);
  // 加上单位并返回
  @return $result + rem;
}