vue实现移动端适配

使用 flexible.js 方案

安装 flexible.js 库，动态调整根元素的字体大小，结合 rem 单位实现适配。在 main.js 中引入：

import 'lib-flexible/flexible'

CSS 中通过 rem 编写尺寸，设计稿以 750px 宽度为准时，1rem = 75px。例如：

.container {
  width: 10rem; /* 750px 设计稿中 750px 宽度 */
}

使用 postcss-pxtorem 插件

配合 flexible.js 自动将 px 转换为 rem。安装插件：

npm install postcss-pxtorem -D

在 postcss.config.js 中配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度/10
      propList: ['*'],
      selectorBlackList: [/^html$/] // 忽略 html 标签
    }
  }
}

Viewport 适配方案

通过 viewport 的 meta 标签和 CSS 单位 vw/vh 实现适配。HTML 中添加：

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

CSS 中使用 vw 单位（设计稿 750px 时，1vw = 7.5px）：

.box {
  width: 100vw; /* 占满屏幕宽度 */
  font-size: 4vw; /* 设计稿中 30px 字体 */
}

媒体查询适配

针对不同屏幕尺寸编写差异化样式：

@media screen and (max-width: 320px) {
  .title { font-size: 14px; }
}
@media screen and (min-width: 750px) {
  .title { font-size: 24px; }
}

注意事项

• 图片适配：使用 max-width: 100% 防止溢出。
• 1px 边框问题：通过 transform: scaleY(0.5) 或伪元素实现。
• 禁用用户缩放：确保 user-scalable=no。