rem 的onresize

`onresize` 是一个 HTML 元素的事件属性，在元素的大小发生变化时触发。`rem` 是一种相对于根元素字体大小的长度单位，用于响应式网页设计。因此，`onresize` 事件和 `rem` 单位之间并没有直接的关联。

在使用 `rem` 进行响应式设计时，可以通过 JavaScript 监听 `onresize` 事件来动态改变根元素的字体大小，从而实现页面布局的自适应。例如：

window.onresize = function() {
  var windowWidth = window.innerWidth;
  var fontSize = windowWidth / 20; // 将根元素的字体大小设置为屏幕宽度的 1/20
  document.documentElement.style.fontSize = fontSize + 'px';
}

这段代码会在窗口大小发生变化时触发 `onresize` 事件，计算出根元素的字体大小，并将其设置为新值。这样，在使用 `rem` 单位进行布局时，元素的大小会随着窗口大小的变化而自适应调整。

相关问题

Vue3使用postcss-pxtorem

在Vue3中使用postcss-pxtorem，你需要进行以下几个步骤：

1. 首先，在你的项目中安装postcss-pxtorem插件，并确保安装了PostCSS 8的版本。

2. 修改package.json文件，在"postcss"字段下添加如下配置：

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 75, 
      "propList": ["*"], 
      "minPixelValue": 2 
    }
  }
}

这里的rootValue表示设计稿元素尺寸相对于75px的比例，propList表示要转换的属性列表，minPixelValue表示要替换的最小像素值。

3. 在项目中新建一个rem.js文件，并在main.js中引用它。rem.js文件中的代码如下：

// 基准大小
const baseSize = 18

// 设置rem函数
function setRem() {
  // 当前页面宽度相对于1920宽的缩放比例，可以根据实际情况进行修改
  const scale = document.documentElement.clientWidth / 1920

  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}

// 初始化rem
setRem()

// 窗口大小改变时重新设置rem
window.onresize = function () {
  setRem()
}

这样，你就可以在Vue3中使用postcss-pxtorem插件来实现rem单位的自动转换了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3.0中使用postcss-pxtorem](https://blog.csdn.net/sd19871122/article/details/113845798)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vuecli3配置postcss-pxtorem](https://blog.csdn.net/qq_28259083/article/details/124301683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue-cli3.0 配置 以及 postcss-pxtorem的使用](https://blog.csdn.net/weixin_34378922/article/details/93177154)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]