设置html的根rem(随窗口改变自动调整)

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
### 实现 Vue 项目中动态调整 REM 布局 为了使 Vue 项目的页面布局能够随着屏幕尺寸的变化自动调整 REM 值,可以采用 `lib-flexible` 和 `postcss-pxtorem` 的组合方案[^2]。 #### 安装依赖包 首先,在项目中安装必要的依赖: ```bash npm i lib-flexible -S npm i postcss-pxtorem@5.1.1 -D ``` 这一步骤引入了两个重要的工具:`lib-flexible` 负责根据设备宽度设置 HTML 元素的字体大小;`postcss-pxtorem` 则用于将 CSS 中的 px 单位转换成相对应的 rem 单位。 #### 配置 PostCSS 插件 接着,在项目目录创建或编辑现有的 `postcss.config.js` 文件,并加入以下配置: ```javascript module.exports = { plugins: { 'autoprefixer': {}, 'postcss-pxtorem': { rootValue: 100, propList: ['*'], selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 0 } } }; ``` 上述配置使得所有以像素(px)定义的属性都将被转化为基于当前 HTML 字体大小的比例单位(rem)。通过这种方式,当 `lib-flexible` 修改了 `<html>` 标签内的 font-size 属性时,整个应用中的样式也会相应地缩放。 #### 初始化 Flexible 库 最后,在入口 JavaScript 文件(通常是 main.js 或 app.vue)顶部引入 flexible 模块: ```javascript import 'lib-flexible/flexible' ``` 这段代码会在每次页面加载时执行一次,从而确保即使是在浏览器窗口大小发生改变的情况下也能正确计算并更新文档流内各个元素的实际显示比例[^1]。 这样就完成了基本的 REM 自适应布局设置过程。每当用户的视口发生变化时,HTML 文档的基础字体大小会随之调整,进而影响到由该基础值衍生出来的其他长度测量值,最终达到良好的跨屏体验效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值