vue行動端適配不了-前端問答-PHP中文網

vue行動端適配不了

WBOY

發布： 2023-05-24 13:22:07

原創

670 人瀏覽過

隨著行動互聯網的發展，越來越多的網站和應用程式開始將行動終端作為主要的存取方式。在行動端開發中，如何適應不同的設備解析度成為一個重要的議題。對於 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行動端適配不了的詳細內容。更多資訊請關注PHP中文網其他相關文章！