随着移动互联网的发展，越来越多的网站和应用程序开始将移动终端作为主要的访问方式。在移动端开发中，如何适配不同的设备分辨率成为一个重要的问题。对于 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 属性来实现对不同尺寸设备的适配。通常，通过以下步骤来实现移动端适配：
立即学习“前端免费学习笔记（深入）”；
- 使用 viewport 设置正确的缩放比例。
在 HTML 文件 head 标签中添加以下代码：
- 开启 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);
}- 根据设计稿分辨率设置 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 布局适用于不同分辨率和方向的移动设备，能够更好地适配用户的设备。
