nuxtjs使用rem 实现自适应窗口的大小

效果图：

步骤 1：安装 PostCSS 和 PostCSS 插件

npm install postcss postcss-pxtorem --save-dev

步骤 2：配置 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    
    
  compatibilityDate: '2024-04-03',
  devtools: {
    
     enabled: false },
  // 配置网站头部信息，包括 logo 和 favicon
  app: {
    
    
    head: {
    
    
      link: [
        {
    
     rel: "icon", type: "image/x-icon", href: "/logo.ico" }
      ],
      script: [
        {
    
    
          children: `
            (function() {
    
    
              function setRemUnit() {
    
    
                var docEl = document.documentElement;
                // 获取设备像素比
                const pixelRatio = window.devicePixelRatio;
                console.log("pixelRatio: " + pixelRatio)

                // 根据设备像素比调整根字体大小
                  let baseFontSize = 16 * pixelRatio; // 针对高分辨率设备
                   console.log("baseFontSize: " + baseFontSize)

                // 设置根元素的字体大小
                docEl.style.fontSize = baseFontSize + 'px';
              }
              setRemUnit();
            })();
          `
        }
      ],
      meta: [
        {
    
     name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
      ]
    }
  },
  devServer: {
    
    
    host: '0.0.0.0',
    port: 3000
  },
  css: [
    '~/assets/css/tailwind.css',
    '~/assets/css/style.css',
    'element-plus/dist/index.css',
  ],
  build: {
    
    
    transpile: ['element-plus'],
  },
  site: {
    
     //https://nuxtseo.com/
    url: 'http://localhost:3000',
    name: '重庆信驰科技有限公司',
    description: '信驰、科技、创新、智能、高效、服务、物联网、iot、智能物联平台、软件开发、硬件设计、智能抄表、智慧燃气、燃气报警器、水表、气表、车联网、管网巡检、水务营收系统、燃气营收系统', // The description of your site, used in the meta tags.
  },
  // Vite 配置
  vite: {
    
    
    resolve: {
    
    
      alias: {
    
    
        'dayjs': 'dayjs/esm'
      },
    },
    css: {
    
    
      postcss: {
    
    
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
          require('postcss-pxtorem')({
    
    
            rootValue: 16,
            propList: ['*'], // 转换所有属性
            unitPrecision: 5, // 保留rem单位的小数位数
            minPixelValue: 1, // 不转换小于1px的值
            mediaQuery: true, // 是否转换媒体查询中的px
          })
        ],
      },
    },
    plugins: [
      require('unplugin-vue-components/vite')({
    
    
        resolvers: [
          require('unplugin-vue-components/resolvers').ElementPlusResolver()
        ]
      }),
      require('unplugin-auto-import/vite')({
    
    
        resolvers: [require('unplugin-vue-components/resolvers').ElementPlusResolver()],
      })
    ]
  },

  modules: ['@nuxtjs/seo', '@nuxtjs/tailwindcss']
})