移动端适配

1. 使用媒体查询 (Media Queries)

通过 CSS 媒体查询可以根据设备的屏幕尺寸来调整样式。以下是一个基本的示例：

/* styles.css */
body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

这种方法可以针对不同的屏幕宽度调整样式，保证在不同设备上的良好显示效果。

2. 使用视口 (Viewport) 元标签

在 index.html 文件中加入以下元标签，使得页面能够根据设备宽度缩放：

<!-- index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签会告诉浏览器适配设备的宽度，并根据 initial-scale 设置初始缩放比例。

3. 使用弹性布局 (Flexbox/Grid)

使用 flexbox 或 grid 布局可以让布局更具弹性，自动适应不同尺寸的屏幕。

/* styles.css */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 100%;
}

@media (min-width: 600px) {
  .item {
    flex: 1 1 48%;
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 30%;
  }
}

这种布局方式可以在不同屏幕尺寸下自动调整布局，使页面内容更易阅读和操作。

4. 使用 rem 或 em 单位

使用 rem 或 em 作为单位代替 px，可以更好地适配不同的屏幕尺寸。

/* styles.css */
html {
  font-size: 16px; /* 1rem = 16px */
}

.container {
  padding: 1rem;
}

.text {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

这种方式结合媒体查询可以动态调整根字体大小，从而全局调整所有元素的大小。

5. 使用第三方库

可以使用第三方库如 Vant (opens new window) 或 Bootstrap-Vue (opens new window) 来快速构建适配移动端的 Vue 应用。

npm install vant

然后在项目中引入并使用：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

这些库提供了大量现成的 UI 组件，默认就适配移动端，减少了你手动编写样式的工作量。

6. 使用 viewport 单位 (vw, vh)

vw 和 vh 是相对于视口宽度和高度的单位，可以用于设置元素的宽高，使其更具响应性。

.container {
  width: 100vw;
  height: 50vh;
}

这种方式可以让元素根据视口大小自动调整尺寸。

7. 使用 PostCSS 插件

可以通过 postcss-px-to-viewport 插件将 px 单位自动转换为 vw 单位，实现更精确的移动端适配。

步骤：

1. 安装插件：

   npm install postcss-px-to-viewport -D
   

2. 在项目的 postcss.config.js 中配置：

   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 375, // 设计稿的视口宽度
         viewportHeight: 667, // 设计稿的视口高度
         unitPrecision: 5, // 单位转换后保留的小数位数
         viewportUnit: 'vw', // 需要转换的视口单位
         selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类
         minPixelValue: 1, // 小于或等于1px不转换为视口单位
         mediaQuery: false, // 允许在媒体查询中转换px
       }
     }
   }