如何快速实现响应式多屏幕适配

2025年11月22日 11:13

项目涉及的场景比较简单，所以我个人的配置也比较粗糙简单，如果要对于更详细的多端适配，可能需要更细致的设定，如果希望一键快速实现大体上过得去的pc端多端适配，可以用这个法子。

安装postcss(必须)+tailwindcss(可选)
安装postcss-plugin-px2rem(必须)
~~在豆包搜索postcss-plugin-px2rem如何配置应用~~在postcss.config.js文件里面按需配置（关键）

module.exports = {
  plugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 16, // 根元素字体大小（默认 16px，即 1rem = 16px）
      unitPrecision: 5, // 转换后的 rem 保留小数位数（默认 5）
      propList: ['*'], // 需要转换的 CSS 属性（默认 ['*']，即所有属性）
      selectorBlackList: [], // 不转换的选择器（如 ['body']，则 body 下的 px 不转换）
      replace: true, // 是否直接替换原 px 值（默认 true，不保留原 px）
      mediaQuery: false, // 是否转换媒体查询中的 px（默认 false，不转换）
      minPixelValue: 0, // 最小转换像素值（默认 0，即所有 px 都转换）
      exclude: /node_modules/i // 排除的文件路径（如 node_modules 下的样式不转换）
    })
  ]
}

后续需要详细配置的话，需要关注的两个属性

selectorBlackList: [], 
mediaQuery: false,

在App.vue 文件下添加(关键)

function setRootFontSize() {
  const screenWidth = document.documentElement.clientWidth;
  const rootFontSize = screenWidth / 7.5; 
  document.documentElement.style.fontSize = `${rootFontSize}px`;
}

setRootFontSize();
window.addEventListener('resize', setRootFontSize);

这里因为我们项目主要是大屏和超大屏工作，所以我针对我们的项目具体应用场景做了一下更改

function setRootFontSize() {
  const screenWidth = document.documentElement.clientWidth;
  if(screenWidth<1560){
      const rootFontSize = screenWidth / 75; 
      document.documentElement.style.fontSize = `${rootFontSize}px`;
  }
}

具体原理搜索rem是什么意思就行了

阅读视图