[配置]rem设置

背景:

移动项目或者响应式网站需要尺寸自适应;

选型:

rem;

rem定义:

相对长度单位,相对于根元素(即html元素)font-size计算值的倍数;

设置函数:

    resizeFontSize(){
      //获取根元素
      const docEl = document.documentElement;
      //获取设备宽度
      const {clientWidth} = docEl;
      //若未获取到设备宽度,则终止函数执行
      if (!clientWidth) return ;
      //计算rem基础配置:设计图以750px为准时,px rem比例为1:100
      const fs= 100*(clientWidth/750) ;
      //为根元素字体赋值
      docEl.style.fontSize = `${fs}px`;
    }

调用时机:

我做的验证demo是用的vue框架,在APP.vue的钩子函数mounted里调用:

  mounted() {
    this.resizeFontSize();
  },

如果是普通响应式网页,建议在窗口尺寸变更时调用:

    //当窗口尺寸变更时
    window.onresize=function () {
        resizeFontSize()
    }

备注:此设置已验证OK,需要看源码的同学,可以克隆如下项目查看(在App.vue文件中):
demo的github地址:https://github.com/tom-wong666/xiaoa.git

博文通览提示:

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址:https://blog.youkuaiyun.com/tom_wong666/article/details/84137820

<think>嗯,用户问的是如何在Vue3项目中配置REM布局,特别是postcss-pxtorem配置示例。首先,我需要回忆一下REM布局的基本原理。REM是相对于根元素字体大小的单位,所以通常需要动态设置html的font-size来适配不同屏幕尺寸。而postcss-pxtorem的作用是将px单位自动转换为rem,这样开发时可以直接按照设计稿的像素值来写,提高效率。 接下来,我得考虑Vue3项目的结构。Vue3通常使用Vite作为构建工具,所以需要指导用户如何在Vite中配置postcss-pxtorem。首先安装必要的依赖,包括postcss、postcss-pxtorem,可能还需要amfe-flexible来自动调整根字体大小。然后,创建或修改postcss.config.js文件,这里要给出一个配置示例,比如设置rootValue为37.5,对应设计稿的375px宽度,这样1rem等于37.5px,方便计算。同时,propList要包含*,表示转换所有属性。 另外,用户可能需要动态调整根字体大小,这时候需要引入lib-flexible或者amfe-flexible。不过,lib-flexible已经不再维护,推荐使用amfe-flexible。在main.js中引入,并设置html的font-size。这里需要注意的是,在Vue3中可能需要使用viewport单位或者监听窗口变化来动态调整。 还要考虑用户的设计稿尺寸。如果设计稿是750px宽,rootValue可能需要设置为75,这样1rem等于75px,但实际开发中可能需要除以2,因为设计稿通常是物理像素,而CSS是逻辑像素。所以要根据实际情况调整rootValue的值。 另外,可能用户会遇到配置不生效的问题,这时候需要检查postcss配置文件的位置是否正确,是否被Vite正确加载。Vite默认会读取项目根目录下的postcss.config.js,所以确保文件存在且配置正确。同时,检查是否安装了必要的依赖,并且没有版本冲突。 最后,生成相关问题的时候,应该围绕用户可能进一步遇到的问题,比如如何动态调整根字体大小、如何处理不想转换的情况、如何适配移动端等。这样可以帮助用户更全面地理解和应用REM布局。</think>### 在Vue3中配置REM布局的步骤 #### 1. 安装必要依赖 需要安装 `postcss-pxtorem` 和 `amfe-flexible`(用于动态计算根字体大小): ```bash npm install postcss postcss-pxtorem amfe-flexible --save-dev ``` #### 2. 配置动态根字体大小 在 `main.js` 中引入自动适配方案: ```javascript import 'amfe-flexible' // 自动根据设备宽度设置html字体大小 ``` #### 3. 创建PostCSS配置文件 在项目根目录创建 `postcss.config.js`: ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度为375px时设置为37.5(375/10) propList: ['*'], // 转换所有属性的px单位 selectorBlackList: ['.norem'] // 过滤以.norem开选择器的转换 } } } ``` 此配置会根据设计稿尺寸自动将px转换为rem,其中: - `rootValue: 37.5` 表示1rem=37.5px(对应375px宽设计稿) - 若设计稿为750px,应设置为`75`(需配合`amfe-flexible`的scale计算)[^2] #### 4. 添加视口meta标签 在 `index.html` 中添加: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> ``` #### 5. 验证配置 在组件中编写测试样式: ```css .test-box { width: 375px; /* 转换后为10rem (375/37.5) */ height: 200px; } ``` ### 配置说明表 | 配置项 | 说明 | |----------------|--------------------------------------------------------------------| | rootValue | 基准值,通常为设计稿宽度/10(375px设计稿对应37.5) | | unitPrecision | 转换后的小数位数(默认5) | | propList | 需要转换的属性列表,['*']表示全部转换 | | mediaQuery | 是否转换媒体查询中的px(默认false) | | replace | 是否直接替换px值而不是追加(默认true) | ### 注意事项 1. 设计稿尺寸需要与rootValue对应(375px设计稿用37.5) 2. 需要禁用浏览器默认缩放功能 3. 第三方UI库可能需要额外配置selectorBlackList 4. 开发环境下建议保留原始px值便于调试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tom_wong666

码字不易,分享有功,期待赞赏!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值