À l'ère de l'Internet mobile en pleine croissance, en tant que développeurs front-end, nous devons comprendre et maîtriser les technologies d'adaptation pour divers effets d'affichage mobile. Parmi les nombreux schémas d'adaptation, l'utilisation remet vwla disposition sont les deux technologies les plus populaires et les plus couramment utilisées à l'heure actuelle. En utilisant raisonnablement ces deux technologies, nous pouvons faire en sorte que nos pages Web affichent les effets visuels les plus supérieurs sur des écrans de différentes tailles. En même temps, ils apportent également plus de flexibilité et de commodité. Alors, comment mieux comprendre et utiliser ces deux technologies ? Examinons les mises en page remet les mises en page adaptées aux mobiles vw.

1. Pixels logiques et pixels physiques

Les pixels logiques et physiques sont des termes qui décrivent la résolution d'un écran d'ordinateur.

Pixel logique : Aussi appelé pixel indépendant , il ne représente pas un point réel sur l'écran, mais une unité abstraite utilisée par le système. Par exemple, lors de la programmation, nous concevons souvent des mises en page basées sur des pixels logiques, car les pixels logiques sont stables et cohérents, et ils peuvent rester inchangés dans différents appareils et résolutions.
Pixels physiques : également appelés pixels de l'appareil , représentent des points réels sur l'écran. Chaque pixel physique est constitué d'un ou plusieurs sous-pixels (généralement des sous-pixels rouges, verts et bleus) qui émettent de la lumière. La résolution de l'écran est de 1920 × 1080, indiquant que la largeur de l'écran est de 1920 pixels physiques et la hauteur est de 1080 pixels physiques.

La relation entre les pixels logiques et les pixels physiques est définie par un ratio de pixels de périphérique (Device Pixel Ratio), qui est le rapport du nombre de pixels physiques sur le nombre de pixels logiques. Par exemple, un rapport de pixels de périphérique de 2 signifie qu'un pixel logique équivaut à une grille de pixels physiques de 2 × 2.

Par exemple , iPhone 8la résolution d'écran de est 750×1334, mais comme le rapport de pixels de l'appareil est 2, donc pour les développeurs, sa taille d'écran devient 375×667un pixel logique, de sorte que les développeurs peuvent 375×667effectuer la conception de la mise en page et la mise en page en fonction de cette résolution logique fixe Le positionnement de l'élément . Bien sûr, la clarté et les détails de l'affichage réel dépendront du nombre de pixels physiques.

Résumé comme suit :

Pixel logique : Le pixel en CSS, une unité absolue , garantit que les dimensions des éléments sur différents appareils sont les mêmes.
Pixel physique : le pixel réel de l'écran de l'appareil, unité relative , la taille du pixel physique est différente selon les appareils.

2. Balise méta de la fenêtre d'affichage

La balise méta de la fenêtre ( Viewport Meta Tag) est une version de la balise HTML <meta> qui permet aux développeurs Web de contrôler la taille et les proportions de la fenêtre. Ceci est particulièrement important pour la conception Web réactive, car cela peut aider à garantir que le contenu s'affiche correctement sur divers appareils.

Les principales utilisations de la balise meta viewport sont :

Créez un site adapté aux mobiles : utilisez la balise Meta de la fenêtre d'affichage pour vous assurer que les pages s'affichent correctement sur les appareils mobiles.
Contrôler la taille et le zoom de la page : vous pouvez définir les attributs d'échelle initiale, d'échelle minimale et d'échelle maximale pour contrôler le niveau de zoom initial, le niveau de zoom minimal et maximal de la page.
Améliorer l'expérience utilisateur : l'utilisation de la balise méta de la fenêtre d'affichage peut offrir aux utilisateurs une meilleure expérience lors de la visualisation de pages Web sur différents appareils.

Une balise Meta de fenêtre d'affichage courante ressemble à ceci :

<meta name="viewport" content="width=device-width, initial-scale=1">

name="viewport"Cette partie du code indique au navigateur qu'il s'agit d'une balise meta viewport.
content="width=device-width, initial-scale=1.0"Cette partie du code définit le comportement spécifique de la fenêtre.
- width=device-widthDéfinissez la largeur de la fenêtre de mise en page égale à la largeur de l'avant de l'appareil (en pixels indépendants de l'appareil), la page aura alors la même largeur de mise en page sur différents appareils.
- initial-scale=1.0Définit le facteur de mise à l'échelle initial sur 1,0, ce qui signifie que, par défaut, la largeur de la page correspond à la largeur de la fenêtre du navigateur et qu'aucune mise à l'échelle ne se produira.

Cette balise signifie définir la largeur de la fenêtre d'affichage égale à la largeur de l'appareil, et le niveau de zoom initial de la page est 1 .
L'objectif principal de ce code est de garantir que vos pages Web s'affichent à la taille et aux proportions appropriées sur tous les écrans et appareils sans obliger les utilisateurs à zoomer ou à faire défiler manuellement .

Les attributs pouvant être définis dans la balise meta sont les suivants :

Les attributs	décrire
largeur	La largeur de l'écran d'affichage de l'appareil, les valeurs couramment utilisées sont la largeur de l'appareil (représentant la largeur de l'appareil) et 600 et d'autres valeurs spécifiques
hauteur	La hauteur de l'écran d'affichage de l'appareil, les valeurs couramment utilisées sont device-height (représentant la hauteur de l'appareil) et 800 et d'autres valeurs spécifiques
échelle initiale	Le taux de zoom initial, c'est-à-dire le taux de zoom lorsque la page Web est affichée pour la première fois par rapport à la fenêtre d'affichage, généralement défini sur 1,0
échelle minimale	L'échelle minimale à laquelle l'utilisateur est autorisé à effectuer un zoom arrière doit être un nombre, la valeur par défaut est 0,25
échelle maximale	L'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer doit être un nombre, la valeur par défaut est 1,6
évolutif pour l'utilisateur	Si l'utilisateur peut zoomer manuellement, la valeur est non signifie non, oui signifie oui.

Trois, em et rem

1. Le concept de base de em et rem

Em et rem sont des unités de longueur en CSS, qui sont utilisées pour définir la taille de la police, la hauteur, la largeur et d'autres attributs des éléments.

Em est une unité relative , relative à la taille de police de l'élément parent. Si la taille de police de l'élément parent n'est pas spécifiée, le em sera relatif à la taille de police par défaut du navigateur, qui est généralement de 16 pixels. Par exemple, si la taille de police de l'élément parent est de 20px, alors "1em" est égal à 20px et "0.5em" est égal à 10px.
rem est une unité relative , similaire à em, mais rem est relatif à la taille de police de l'élément racine (html), et non relatif à la taille de police de l'élément parent. Par exemple, si la taille de police de html est de 20px, alors "1rem" est égal à 20px et "0.5rem" est égal à 10px.

Exemple de code :

<html>
<head>
<style>
    /* 设置根元素的字体大小为20px */
    html {
      
       font-size: 20px; }
    div {
      
       font-size: 2rem; } /* 2rem = 40px */
    p {
      
       font-size: 2em; } /* 2em 的实际大小取决于其父元素div的字体大小，因此是2*40px=80px */
</style>
</head>
<body>
    <div>
        这段文字的字体大小是2rem，实际大小为40px。
        <p>这段文字的字体大小是2em，实际大小为80px。</p>
    </div>
</body>
</html>

Dans cet exemple, la taille de police de l'élément p est 2em. Étant donné que la taille de police de son div parent est de 40px (2rem), 2em est en fait égal à 80px. Par conséquent, l'utilisation de em et rem comme unités de longueur peut être pratique pour une disposition relative et une conception réactive.

L'avantage d'utiliser em et rem est qu'il peut améliorer l'affichage des pages Web sur différents appareils et navigateurs, et peut facilement mettre en œuvre une conception réactive.

2. plugin vscode px à rem

px to remIl est recommandé d'utiliser des plug-ins dans vscode
insérez la description de l'image ici
pxet remles deux sont des unités de longueur dans les styles CSS. Sur différents appareils et écrans, pxla taille du est fixe, tandis que remla taille du est relative et peut root emêtre mise à l'échelle en fonction de la taille de la police racine ( ) de la page Web. Dans la conception réactive, afin de permettre l'affichage adaptatif de la mise en page et des éléments des pages Web sur des appareils de différentes tailles, il est généralement utilisé remcomme unité de longueur.

Le plug-in VSCode peut vous aider à convertir automatiquement les unités en unités px to remlors de l'écriture de styles CSS , de sorte que vous n'ayez pas besoin de calculer et de convertir manuellement, ce qui améliore l'efficacité de la programmation. Il vous suffit de définir la taille de la police racine dans les paramètres, et le plugin convertira automatiquement la valeur que vous entrez dans la valeur correspondante en fonction de cette taille.pxrempxrem

Configurer le taux de conversion

Configurez ici l'unité de conversion, c'est-à-dire la quantité de px égale à 1rem, généralement définie sur 100 pour un calcul facile.
La touche de raccourci de conversion alt + z est également très simple à utiliser. Sélectionnez le code

que vous avez écrit et appuyez dessus pour le convertir en rem.pxalt+z

quatre, vw

1. concept de base vw

Vw est une unité relative utilisée dans CSS , le nom complet est viewport width, c'est-à-dire la largeur de la fenêtre. 1vw est égal à 1 % de la largeur de la fenêtre.

Dans la conception réactive, l'unité vw est largement utilisée pour créer des mises en page qui fonctionnent bien sur différentes tailles d'écran et résolutions. Parce qu'ils sont relatifs à la taille de la fenêtre et non fixes comme les pixels, les éléments utilisant les unités vw peuvent automatiquement se redimensionner lorsque la fenêtre change de taille pour conserver leur position et leur taille relatives dans la fenêtre.

Par exemple, si vous définissez la largeur d'un élément sur 50vw, la largeur de l'élément sera toujours de 50 % de la largeur de la fenêtre, quelle que soit la largeur de la fenêtre. Cela permet de garder la mise en page cohérente sur différents appareils et tailles d'écran.

2. Convertir px en vw

Dans différents appareils et fenêtres, la taille de 1vw représente 1 % de la largeur de la fenêtre, et l'unité vw peut aider à créer des mises en page plus flexibles et adaptables.

La conversion de px en vw peut être calculée manuellement, ou elle peut être automatiquement convertie par des outils en ligne ou des plug-ins.

Calcul manuel :
La formule de conversion est la suivante : 1vw = 100 / largeur du brouillon de conception (px).
Ainsi, la conversion de px en vw est : largeur de l'élément (px) * (100 / largeur du brouillon de conception (px)) = largeur de l'élément (vw). Par exemple, si la largeur du brouillon de conception est de 750 pixels, la largeur de l'élément de 20 pixels peut être convertie en : 20 * (100 / 750) = 2,667 vw.
Outils en ligne :
Des outils de conversion d'unités en ligne tels que les outils de conversion PX vers VW/VH sont disponibles.
Plug-ins :
certains outils de développement frontaux et IDE fournissent des plug-ins pour prendre en charge la conversion automatique. Par exemple, VSCode a des plug-ins tels que px vers vw.

Cette méthode d'utilisation est similaire à px-to-rem, donc je n'entrerai pas dans les détails.

Il convient de noter que l'unité vw peut ne pas être parfaitement prise en charge sur tous les navigateurs et appareils, et vous pouvez choisir de l'utiliser en fonction de vos besoins réels.

3. Application pratique

Lors du développement de pages côté mobile, vw (Viewport-Width) est une unité relative à la largeur de la fenêtre d'affichage, qui peut être utilisée pour implémenter une mise en page réactive. Ce qui suit est un cas complet, les étapes spécifiques sont les suivantes :

Créez un fichier HTML et importez le fichier CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用vw实现响应式布局</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h1>使用vw实现响应式布局</h1>
  <p>这是一段文字，会随着屏幕大小的变化而改变大小。</p>
</body>
</html>

Dans les fichiers CSS, utilisez vw pour définir la taille et la position des éléments.

h1 {
    
    
  font-size: 6vw;
  margin-top: 3vw;
}

p {
    
    
  font-size: 4vw;
  line-height: 6vw;
}

Dans le code ci-dessus, la taille de la police et le haut de la marge de h1 utilisent tous deux vw comme unité, ce qui signifie que leur taille est proportionnelle à la largeur de la fenêtre d'affichage. La taille de la police et la hauteur de ligne de l'élément p utilisent également l'unité vw, de sorte que l'adaptation de la taille du texte et de l'espacement des lignes peut être réalisée sous différentes tailles d'écran.

Vérifiez l'effet de page dans le navigateur.

Ouvrez le fichier HTML dans le navigateur, vous pouvez voir que la page s'adaptera automatiquement à la taille de l'écran, et la taille du texte et l'espacement des lignes seront également mis à l'échelle proportionnellement. Si vous l'affichez sur un PC, vous pouvez essayer de modifier la taille de la fenêtre du navigateur pour observer l'effet.

À travers le cas ci-dessus, vous pouvez voir que l'utilisation de l'unité vw peut facilement obtenir une mise en page réactive sans utiliser de requêtes média CSS complexes. Mais il convient de noter que lors de l'utilisation de l'unité vw, vous devez définir un rapport approprié en fonction de la situation spécifique, sinon cela peut entraîner un mauvais effet d'affichage.

Cinq, outil de conversion de pixels pxcook

pxcook est un outil de conception, principalement destiné aux concepteurs et aux développeurs front-end, et peut générer rapidement du code de style css. Il peut effectuer les opérations suivantes :

Il peut extraire la couleur, la police, la taille, l'espacement et d'autres attributs dans le brouillon de conception de l'interface utilisateur.
Il peut couper le projet de conception directement dans le dialogue, ce qui réduit considérablement le temps de communication entre la conception et le front-end.
L'outil pxcook peut exporter des spécifications de conception que les concepteurs et les développeurs peuvent comprendre, ce qui rend la communication entre les équipes plus efficace.
Il fournit une analyse globale et unifiée des ébauches de conception, génère rapidement des palettes de couleurs de thème et extrait des éléments de police.
Prend en charge l'analyse des ébauches de conception pour plusieurs plates-formes et plusieurs outils de conception (PS/Sketch/Blue Lake/glisser-déposer des images).

Adresse de téléchargement de pxCook : https://www.fancynode.com.cn/pxcook

insérez la description de l'image ici

6. Résumé

Dans le schéma de disposition d'adaptation du terminal mobile, rem et vw méritent d'être recommandés. L'utilisation de rem peut adapter les unités relatives en fonction de la taille de police de l'élément racine, tandis que vw peut s'adapter en fonction de la largeur de la fenêtre. Lors du choix de la solution à utiliser, vous devez choisir en fonction des conditions spécifiques du projet. Que vous utilisiez rem ou vw, vous devez tenir pleinement compte des différences entre les différentes tailles d'écran et les densités de pixels de l'appareil pour obtenir le meilleur effet d'adaptation. J'espère que cet article pourra vous aider et vous permettre de mieux comprendre les connaissances pertinentes sur la disposition de l'adaptation des terminaux mobiles.

Disposition d'adaptation du terminal mobile rem et vw