随着移动互联网的发展，越来越多的网站和应用程序开始将移动终端作为主要的访问方式。在移动端开发中，如何适配不同的设备分辨率成为一个重要的问题。对于 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 属性来实现对不同尺寸设备的适配。通常，通过以下步骤来实现移动端适配：
在 HTML 文件 head 标签中添加以下代码：
可以使用 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); }
例如：以 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 布局适用于不同分辨率和方向的移动设备，能够更好地适配用户的设备。
以上是vue移动端适配不了的详细内容。更多信息请关注PHP中文网其他相关文章！
