【Nuxt】Nuxt3 响应式方案：rem、vw

原创

已于 2023-12-18 13:48:38 修改 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nuxt3

于 2023-11-17 10:25:30 首次发布

本文介绍了在Nuxt.js项目中使用rem和vw单位进行移动端适配的方法，包括安装插件、配置postcss，以及注意事项。作者推荐vw方案，因为它能避免页面刷新时的缩放问题。

一、rem 方案

注意：采用 rem 的方式会导致页面刷新会有个缩放的变化（我还没找到解决方案），建议还是用下面的 vw 方案吧。

1、安装插件

autoprefixer 文档

Autoprefixer 是一个 CSS 后处理器，它可以自动为 CSS 添加浏览器前缀。浏览器前缀是浏览器厂商为支持新 CSS 属性或特性而添加的代码。

postcss-pxtorem 文档

PostCSS-pxtorem 是一个 PostCSS 插件，它可以自动将 CSS 中的所有 px 单位转换为 rem 单位。rem 单位是 CSS3 新增的一个相对长度单位，它的出现是为了解决 em 的缺点，em 可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem 则是相对于根元素的字体大小，因此，当根元素字体大小改变时，rem 单位的大小不会改变。

pnpm add autoprefixer postcss postcss-pxtorem

2、配置

在 nuxt.config.ts 配置 postcss

  postcss: {
   
   
    plugins: {
   
   
      // 这个工具可以实现自动添加CSS3前缀
      autoprefixer: {
   
   
        overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8'],
      },
      'postcss-pxtorem': {
   
   
        rootValue: 192, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
        // 如果设计稿的尺寸不是 375，而是 750 或其他大小
        //rootValue({ file }) {
   
   
        //	return file.indexOf('vant') !== -1 ? 37.5 : 75;
        //},
        propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
        mediaQuery: true, // 是否允许使用媒体查询，false媒体查询的代码可用，true不可用
        exclude: 'ignore',
        replace: true