模拟flexible.js 前端开发中的大屏布局方案
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;
}
在具体页面里使用
padding: px2rem(16) px2rem(24);