Vue モバイル端末は適応できません

モバイル インターネットの発展に伴い、主なアクセス方法としてモバイル端末を使用する Web サイトやアプリケーションが増えています。モバイル開発では、さまざまなデバイスの解像度にどのように適応するかが重要な問題となっています。 Vue 開発者にとって、モバイルへの適応には、さまざまな画面サイズ、密度、向きに対する適応の問題を考慮する必要があります。

従来の適応方法は、メディア クエリとレム ユニットを通じて実現されます。具体的な方法は、最初に異なる画面に異なるスタイル ファイルを設定し、次に rem 単位を使用してフォントと要素のサイズをルート要素の幅を基準にして拡大縮小することです。モバイル デバイスは通常、デバイス ピクセル比 (DPR) が 1 より大きい高解像度画面を使用します。表示効果を確実にするには、ビューポートを使用して正しいスケーリング比を設定する必要があります。以下は、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 はルート要素のフォント サイズを基準にして計算されるため、スケーリング エラーが発生する可能性があります。次に、ビューポートのスケーリング設定に問題があり、一部の要素が異常に表示される可能性があります。

したがって、Vue モバイル開発では、適応ソリューションとしてフレックス レイアウトを使用することをお勧めします。フレックス レイアウトを使用する利点は、さまざまなフレックス プロパティを設定することで、さまざまなサイズのデバイスに適応できることです。通常、モバイルへの適応は次の手順で実現されます。

1. ビューポートを使用して正しいズーム率を設定します。

HTML ファイルの head タグに次のコードを追加します。

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

2. フレックス レイアウト機能を有効にします。

Vue.js プロジェクトで sass-resources-loader プラグインを使用すると、フレックス レイアウト機能を自動的に有効にすることができます:

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 に設定し、次に、他の要素のサイズをレム単位で設定します。

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;
  }
}

上記の手順を使用してモバイル アダプテーションを実装した後は、従来のメディア クエリとレムを使用して要素サイズを大幅に拡大することを回避できます。さらに、レスポンシブ フレックス レイアウトは、解像度や方向が異なるモバイル デバイスに適しており、ユーザーのデバイスによりよく適応できます。

以上がVue モバイル端末は適応できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。