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

效果图：

步骤 1：安装 PostCSS 和 PostCSS 插件

npm install postcss postcss-pxtorem --save-dev

步骤 2：配置 nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  devServer: {
    host: '0.0.0.0',
    port: 3000
  },
  app: {
    head: {
      script: [
        {
          children: `
            (function() {
              function setRemUnit() {
                var docEl = document.documentElement;
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                var rem = clientWidth / 19.2;
                docEl.style.fontSize = rem + 'px';
              }

              setRemUnit();

              if (window.addEventListener) {
                window.addEventListener('resize', setRemUnit);
                window.addEventListener('pageshow', function(e) {
                  if (e.persisted) {
                    setRemUnit();
                  }
                });
              }
            })();
          `
        }
      ],
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  },
  css: [
    '~/assets/css/style.css'
  ],
  site: {
    url: 'http://localhost:3000',
    name: 'name',
    description: 'description',
  },
  modules: ['@nuxtjs/seo'],
  // Vite CSS配置
  vite: {
    css: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 192, // 1rem = 192px，基于1920px设计稿
            propList: ['*'], // 转换所有属性
            unitPrecision: 5, // 保留rem单位的小数位数
            minPixelValue: 1, // 不转换小于1px的值
            mediaQuery: false, // 是否转换媒体查询中的px
          })
        ]
      }
    }
  }
});

原文地址：https://blog.csdn.net/weixin_40466351/article/details/142208499

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！