vue移动端适配不了

随着移动互联网的发展，越来越多的网站和应用程序开始将移动终端作为主要的访问方式。在移动端开发中，如何适配不同的设备分辨率成为一个重要的问题。对于 vue 开发者而言，移动端适配需要考虑不同屏幕尺寸、密度和方向的适配问题。

传统的适配方式是通过媒体查询和 rem 单位来实现的。具体方法是首先针对不同的屏幕分别设置不同的样式文件，然后使用 rem 单位实现相对于根元素的宽度来缩放字体和元素大小。移动端设备通常都采用设备像素比（Device Pixel Ratio，DPR）大于1的高清屏，为了确保显示效果，需要使用 viewport 设置正确的缩放比例。下面是一个基于 rem 单位的适配方案示例。

/* 设置用于计算 rem 值的根元素字体大小 */
html {
  font-size: 16px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  /* 针对 4 英寸屏幕设置样式 */
  html {
    font-size: 14px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /* 针对 4.7 英寸屏幕设置样式 */
  html {
    font-size: 16px;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  /* 针对 5.5 英寸屏幕设置样式 */
  html {
    font-size: 18px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 针对 9.7 英寸 iPad 屏幕设置样式 */
  html {
    font-size: 24px;
  }
}

如上代码所示，通过媒体查询针对不同设备的屏幕宽度设置不同的根元素字体大小，再通过 rem 单位实现相对于根元素的宽度缩放元素大小。

但是，这种传统的适配方式存在一些问题。首先，由于 rem 是相对于根元素字体大小计算，可能存在缩放误差。其次，由于 viewport 缩放比例设置可能存在一些问题，可能会导致某些元素显示异常。

因此，在 Vue 移动端开发中，推荐使用 flex 布局作为适配方案。使用 flex 布局的好处是可以通过设置不同的 flex 属性来实现对不同尺寸设备的适配。通常，通过以下步骤来实现移动端适配：

立即学习“前端免费学习笔记（深入）”；

1. 使用 viewport 设置正确的缩放比例。

在 HTML 文件 head 标签中添加以下代码：

AITDK

免费AI SEO工具，SEO的AI生成器

下载

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

2. 开启 flex 布局特性。

可以使用 Vue.js 项目中的 sass-resources-loader 插件来自动化开启 flex 布局特性：

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";`
      },
    },
  },
}

其中，flex.scss 文件代码如下：

/* 开启 flex 布局特性 */
$flex: 1;

$flex-use-strict: false; // 不使用严格模式，防止出现 flex-basis 百分比计算错误

@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin align-self($align: center) {
  align-self: $align;
}

@mixin flex-wrap($wrap: wrap) {
  flex-wrap: $wrap;
}

.flex {
  flex: #{$flex};
}

.flex-row {
  @include flex(row);
}

.flex-column {
  @include flex(column);
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-wrap {
  @include flex-wrap;
}

.flex-self-start {
  @include align-self(flex-start);
}

.flex-self-end {
  @include align-self(flex-end);
}

.flex-self-center {
  @include align-self(center);
}

.flex-self-auto {
  @include align-self(auto);
}

3. 根据设计稿分辨率设置 rem 值。

例如：以 iPhone 6/7/8 系列（375x667）为基准，设计稿尺寸为 750x1334，可以先设置根元素字体大小为 100px，然后其他元素的尺寸以 rem 为单位进行设置。

html {
  font-size: 100px;
}

@media only screen and (max-width: 480px) { /* 750 x 1334 设计稿在 480 这个断点上相当于 375 x 667 */
  html {
    font-size: 66.7px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 414 x 736 */
  html {
    font-size: 110.94px;
  }
}

@media only screen and (min-width: 768px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 768 x 1366 */
  html {
    font-size: 153.6px;
  }
}

使用上述步骤实现移动端适配后，可以避免使用传统的媒体查询和 rem 大幅度缩放元素大小。此外，响应式的 flex 布局适用于不同分辨率和方向的移动设备，能够更好地适配用户的设备。