Comment définir une largeur de 750 dans Uniapp

Dans le développement front-end, l'adaptation est un enjeu très important. Parce que différentes tailles d'écran et différents appareils entraîneront un affichage différent de la page. Dans Uniapp, nous pouvons résoudre ce problème en définissant une largeur de 750.

D'où vient la largeur 750 ?

La largeur de 750 est une taille de brouillon de conception courante dans le développement mobile. Dans des circonstances normales, les concepteurs définiront la largeur du projet de conception de l'interface utilisateur à 750 et la hauteur sera déterminée en fonction de la situation réelle. Pourquoi la largeur du projet de conception est-elle de 750 ? En effet, la résolution minimale de nombreux appareils mobiles est de 750. Par exemple, la résolution de l'iPhone XR est de 828*1792, ce qui correspond essentiellement au rapport de 1:1,78.

Comment définir la largeur 750 dans uniapp ?

Avant de développer uniapp, vous devez installer le plug-in uni-app. Une fois l'installation réussie, commencez à écrire du code.

1. Dans le fichier main.js, ajoutez le code suivant :

import 'uni-percentage-support'

Avec cette ligne de code, nous introduisons le plug-in uni-percentage-support dans uniapp pour apporter les ajustements correspondants à la page.

2. Dans le fichier App.vue, ajoutez le code suivant :

<style>
  html{
    font-size:50vw;
  }
</style>

Ici, nous utilisons vw (viewport percent unit) au lieu de px. Parmi eux, 1vw est égal à 1% de la largeur de la fenêtre. Puisque nous devons nous adapter en fonction de la largeur de 750, nous définissons la taille de la police de l'élément racine html à 50vw, afin que la page puisse être adaptée en fonction de la largeur de 750.

3. Dans la page à adapter, écrivez le code suivant :

<view style="width:100%;height: 100%;background-color:#f5f5f5;">
  <view style="width:37.5rem;height:3rem;margin: 0 auto;background-color:#409EFF;border-radius:5px;"></view>
</view>

Ici, on fixe la largeur du conteneur à 100% et la hauteur à 100%. En interne, nous définissons une étiquette avec une largeur de 37,5rem et une hauteur de 3rem, et utilisons margin: 0 auto pour la centrer. Puisque nous avons défini la taille de la police HTML sur 50vw dans le fichier App.vue, le 37,5rem ici est en fait égal à 750px.

Grâce aux opérations ci-dessus, la page peut être adaptée en fonction de la largeur de 750.

Résumé

Dans uniapp, c'est une méthode courante pour s'adapter en définissant la largeur de 750. En installant le plug-in uni-percentage-support et en définissant la taille de la police HTML, nous pouvons adapter la page en fonction de la largeur 750, présentant ainsi des effets similaires sur les écrans de différents appareils. Bien entendu, ces paramètres peuvent également être ajustés en fonction de la situation réelle pour obtenir les meilleurs résultats.

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!