Vue モバイル端末は適応できません-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-24 13:22:07

オリジナル

669 人が閲覧しました

モバイルインターネットの発展に伴い、主なアクセス方法としてモバイル端末を使用する 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 モバイル開発では、適応ソリューションとしてフレックスレイアウトを使用することをお勧めします。フレックスレイアウトを使用する利点は、さまざまなフレックスプロパティを設定することで、さまざまなサイズのデバイスに適応できることです。通常、モバイルへの適応は次の手順で実現されます。

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

設計ドラフトの解像度に従って 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 サイトの他の関連記事を参照してください。