当前位置：首页 > VUE

vue移动端实现适配

2026-02-25 02:14:30VUE

Vue 移动端适配方案

视口配置

在 public/index.html 中添加 meta 标签，设置视口宽度等于设备宽度，并禁止缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

使用 REM 适配

安装 postcss-pxtorem 插件：

npm install postcss-pxtorem --save-dev

配置 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10
      propList: ['*'],
      selectorBlackList: ['.norem']
    }
  }
}

在入口文件添加动态计算根字体大小：

function setRem() {
  const docEl = document.documentElement
  const width = docEl.clientWidth
  docEl.style.fontSize = width / 10 + 'px'
}
window.addEventListener('resize', setRem)
setRem()

使用 VW 适配

安装 postcss-px-to-viewport 插件：

npm install postcss-px-to-viewport --save-dev

配置 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}

响应式布局

使用 CSS 媒体查询实现不同屏幕尺寸适配：

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .container {
    width: 750px;
  }
}

组件库适配

对于 Vant 等移动端组件库，需要在项目中配置按需加载和适配：

// babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: name => `${name}/style/less`
    }, 'vant']
  ]
}

1px 边框问题

使用伪元素和 transform 解决高清屏下 1px 边框变粗问题：

.border-1px {
  position: relative;
}
.border-1px::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

图片适配

使用 srcset 属性提供不同分辨率图片：

<img src="image@1x.jpg" srcset="image@1x.jpg 1x, image@2x.jpg 2x" alt="">

横竖屏检测

监听 orientationchange 事件处理横竖屏变化：

window.addEventListener('orientationchange', function() {
  if (window.orientation === 90 || window.orientation === -90) {
    console.log('横屏')
  } else {
    console.log('竖屏')
  }
})

vue移动端实现适配