【Nuxt】Nuxt3 响应式方案：rem、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, // 替换包含rem的规则，而不是添加回退
        minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
        unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
        selectorBalckList: ['van', 'el'], // 匹配不被转换为rem的选择器
      },
    },
  },

3、添加 plugins

在 plugins/rem.ts 下添加

export default defineNuxtPlugin(() => {
  if (process.client) {
    // 屏幕适应
    ;(function (win, doc) {
      if (!win.addEventListener) return
      function setFont() {
        let screenWidth = document.querySelector('html')!.offsetWidth
        let fontSize = screenWidth / 10
         // 最小12px
        fontSize = fontSize < 12 ? 12 : fontSize
         // 最大192px
        fontSize = fontSize > 192 ? 192 : fontSize
        document.querySelector('html')!.style.fontSize = `${fontSize}px`
      }
      setFont()
      setTimeout(() => {
        setFont()
      }, 300)
      doc.addEventListener('DOMContentLoaded', setFont, false)
      win.addEventListener('resize', setFont, false)
      win.addEventListener('load', setFont, false)
    })(window, document)
  }
})

4、使用

在 nuxt.config.ts 中使用 plugins

  plugins: ['@/plugins/rem'],

其实也可以不用添加，因为 nuxt 会自动读取并执行，添加只是为了如果存在多个插件排序。

5、注意事项

如果你使用了第三方组件库，比如 element，因为修改了根元素上的 font-size，会导致部分组件依赖继承于根元素上的字体大小的样式发生变化，需要你再单独设置为 16px ！！！！！

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

二、vw 方案

1、安装插件

上面的 autoprefixer 插件建议也先安装了

postcss-px-to-viewport 文档

Postcss-px-to-viewport 是另一个 postcss 插件，其作用与 postcss-pxtorem 类似，都旨在解决响应式布局中单位的灵活性问题。然而，它的侧重点与后者略有不同，主要用来将 CSS 中的 px 单位转换为视口单位 (vw, vh, vmin, vmax)，从而实现基于视口大小的响应式布局。

pnpm add postcss-px-to-viewport

2、配置

  postcss: {
    plugins: {
      // 这个工具可以实现自动添加CSS3前缀
      autoprefixer: {
        overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8'],
      },
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 要转化的单位
        viewportWidth: 1920, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配，最好不要排除node_modules 文件，排除后在项目中会发现字体不能跟随页面放大
        landscape: false, // 是否处理横屏情况
      },
    },
  },

3、使用

不需要额外写代码，配置了直接就可以使用了，好用！推荐！

感谢大佬的分享

nuxt3适配移动端
nuxt3官网搭建，适配pc和移动端支持一键切换中英文，使用pinia和持久化插件