Nous utilisons généralement l'unité px pixel pour le développement côté PC, et n'avons pas besoin de considérer le problème d'adaptation de la page.Lors du développement de pages mobiles, nous devons considérer le problème d'adaptation sous différents écrans.Comment créer des pages Web qui s'adaptent à différents appareils largeurs, comme suit Plusieurs solutions sont introduites :
Option 1 : Mise en page en pourcentage
Disposition en pourcentage, également appelée disposition en flux.
Effet : La largeur est adaptative et la hauteur est fixe.
C'est une solution plus ancienne, et elle est essentiellement utilisée comme auxiliaire maintenant.
Solution 2 : mise en page flexible
Disposition flexible/disposition élastique : c'est un modèle de mise en page préconisé par les navigateurs. Il est plus simple et plus flexible de mettre en page des pages Web et évite le problème du flottement et du sans étiquette. C'est actuellement une méthode populaire.
Basée sur le contrôle précis et flexible de Flex sur la mise en page des boîtes au niveau du bloc, la mise en page Flex convient parfaitement aux mises en page structurées.
Utilisation : ajouter display : flex à l'élément parent ; les éléments enfants peuvent être automatiquement comprimés ou étirés.
Alignement de l'axe principal :
Modifier la propriété d'alignement de l'axe principal : justifier du contenu : valeur de la propriété
Alignement de l'axe latéral : utilisez align-items pour ajuster l'alignement des éléments sur l'axe latéral
Modifiez la direction de l'alignement de l'axe principal (axe X) vers la direction de l'axe latéral (axe Y) :
L'axe principal est horizontal par défaut et l'axe latéral est vertical par défaut. Vous pouvez utiliser la propriété flex-direction pour modifier la direction de disposition des éléments
Emballage de boîtes flexibles : utilisez flex-wrap : envelopper ; pour obtenir l'effet d'une disposition multiligne de boîtes flexibles
Ajustez l'alignement après le saut de ligne : utilisez l'attribut align-content et la valeur de l'attribut est la même que celle de justifier-content.
Option trois : rem
rem est actuellement la solution utilisée par la plupart des entreprises, avec différentes largeurs d'écran et différentes tailles d'éléments de page Web (mise à l'échelle proportionnelle).
L'unité rem est une unité relative, relative au résultat du calcul de la taille de la police de la balise HTML
1rem = 1taille de police html.
Dans le schéma de mise en page rem actuel, la page Web est divisée en 10 parties égales et la taille de la police de la balise HTML correspond à 1/10 de la largeur de la fenêtre d'affichage.
Vérifiez la largeur du brouillon de conception → déterminez la largeur de l'appareil de référence (largeur de la fenêtre) → déterminez la taille de la police racine de référence (1/10 de largeur de la fenêtre)
En prenant le brouillon de conception comme 375px comme exemple, 1rem = 1taille de police html (taille de police racine de base) = 37,5px
Comment définir différentes tailles de police de balises HTML pour différentes tailles d'écran de téléphone : utilisez des requêtes multimédias pour détecter la largeur de la fenêtre d'affichage, puis écrivez des styles CSS différenciés.
Étapes : 1. Utilisez @media pour définir la taille de la police racine HTML, 2. Utilisez rem comme unité
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem适配</title>
<style>
/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
}
/* 2. 书写盒子尺寸, 单位rem */
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Il existe de nombreux appareils mobiles, différentes tailles d'écran et plusieurs fenêtres d'affichage. Il est impossible de définir des requêtes multimédias à chaque fois. À ce stade, vous pouvez utiliser flexible.js, qui est un framework js développé par l'équipe Mobile Taobao pour s'adapter au terminal mobile.Le principe de base est de définir différentes valeurs de taille de police pour le nœud racine HTML de la page Web. selon différentes largeurs de fenêtre.
Il nous a aidés à écrire la requête multimédia et à définir la taille de la police pour le HTML. Il nous a aidés à diviser l'écran en 10 parties, puis il a défini la taille de chaque partie pour la taille de la police du HTML.
Mode d'emploi : introduisez le fichier flexible.js dans le code
Utilisez directement après l'importation :
Recommander un plugin px to rem :
Effet:
Option 4 : vw / vh
vw / vh est également une unité relative, relative au résultat du calcul de la taille de la fenêtre
vw : largeur de la fenêtre
1vw = largeur de fenêtre 1/100
vh：hauteur de la fenêtre
1vh = hauteur de la fenêtre 1/100
principe d'adaptation vw : déterminez d'abord la taille vw correspondant au brouillon de conception (1/100 largeur de la fenêtre)
Vérifiez la largeur du brouillon de conception → déterminez la largeur de l'appareil de référence (largeur de la fenêtre) → déterminez la taille vw (largeur de la fenêtre 1/100)
La taille de vw unit = px unit vh value / (1/100 viewport width)
Par exemple : dessin de conception 375px 100vw=375px 1vw=3.75px
Si la taille de la boîte mesurée est de 75 pixels, elle est de 75/3,75 = 20vw
box { width: 75px; height: 75px; } ==> la conversion est box { width: 20vw; height: 20vw; }
Pendant le développement, ne mélangez pas vw et vh. Utilisez tous les vw ou tous les vh. vh correspond à 1/100 de la hauteur de la fenêtre d'affichage et la hauteur de la fenêtre d'affichage en plein écran est grande. S'ils sont mélangés, la boîte peut être déformée .
La différence entre rem et vw/vh :
Rem est relativement courant sur le marché actuel : 1. Besoin de modifier constamment la taille du texte html 2. Besoin de média de requête multimédia 3. Besoin de flexible.js
vw/vh est la future tendance (immédiatement) : épargnez toutes sortes d'arrêts et de modifications, et les grands constructeurs actuels ont tendance à l'utiliser.