vue移动端适配不了

百变鹏仔 2个月前 (10-31) #前端问答

文章标签 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 属性来实现对不同尺寸设备的适配。通常，通过以下步骤来实现移动端适配：

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

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

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

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

开启 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 布局适用于不同分辨率和方向的移动设备，能够更好地适配用户的设备。

文章推荐

vue移动端适配不了

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗