Le terminal mobile Vue ne peut pas s'adapter

Avec le développement de l'Internet mobile, de plus en plus de sites Web et d'applications commencent à utiliser les terminaux mobiles comme principal moyen d'accès. Dans le développement mobile, la manière de s'adapter aux différentes résolutions des appareils est devenue un problème important. Pour les développeurs Vue, l'adaptation mobile nécessite de prendre en compte les problèmes d'adaptation pour différentes tailles, densités et orientations d'écran.

La méthode d'adaptation traditionnelle est réalisée grâce à des requêtes multimédias et des unités rem. La méthode spécifique consiste d'abord à configurer différents fichiers de style pour différents écrans, puis à utiliser l'unité rem pour redimensionner la police et la taille de l'élément par rapport à la largeur de l'élément racine. Les appareils mobiles utilisent généralement des écrans haute définition avec un rapport de pixels de l'appareil (DPR) supérieur à 1. Afin de garantir l'effet d'affichage, vous devez utiliser la fenêtre d'affichage pour définir le rapport de mise à l'échelle correct. Vous trouverez ci-dessous un exemple de schéma d'adaptation basé sur les unités 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;
  }
}

Comme le montre le code ci-dessus, les requêtes multimédias sont utilisées pour définir différentes tailles de police d'élément racine en fonction de la largeur d'écran de différents appareils, puis l'unité rem est utilisée pour mettre à l'échelle la taille de l'élément par rapport à la largeur de l'élément racine.

Il existe cependant quelques problèmes avec cette méthode d'adaptation traditionnelle. Premièrement, puisque rem est calculé par rapport à la taille de police de l’élément racine, il peut y avoir des erreurs de mise à l’échelle. Deuxièmement, il peut y avoir des problèmes avec le paramètre de mise à l'échelle de la fenêtre d'affichage, ce qui peut entraîner un affichage anormal de certains éléments.

Par conséquent, dans le développement mobile Vue, il est recommandé d'utiliser la mise en page flexible comme solution d'adaptation. L'avantage de l'utilisation de la disposition flexible est que vous pouvez vous adapter à des appareils de différentes tailles en définissant différentes propriétés flexibles. En règle générale, l'adaptation mobile est réalisée à travers les étapes suivantes :

1. Utilisez la fenêtre d'affichage pour définir le taux de zoom correct.

Ajoutez le code suivant dans la balise head du fichier HTML :

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

2. Activez la fonctionnalité de mise en page flexible.

Vous pouvez utiliser le plug-in sass-resources-loader dans le projet Vue.js pour activer automatiquement la fonctionnalité de mise en page flexible :

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";`
      },
    },
  },
}

Parmi eux, flex.scss code de fichier Comme suit :

/* 开启 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. Définissez la valeur rem en fonction de la résolution du brouillon de conception.

Par exemple : basé sur la série iPhone 6/7/8 (375x667), la taille du brouillon de conception est de 750x1334. Vous pouvez d'abord définir la taille de police de l'élément racine sur 100px, puis la taille des autres éléments rem est définie comme unité.

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

Après avoir suivi les étapes ci-dessus pour mettre en œuvre l'adaptation mobile, vous pouvez éviter d'utiliser les requêtes multimédias traditionnelles et le rem pour augmenter considérablement la taille de l'élément. De plus, la mise en page flexible et réactive convient aux appareils mobiles avec différentes résolutions et orientations et peut mieux s'adapter à l'appareil de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!