Résumé de l'expérience de l'adaptation du terminal mobile et de la mise en page réactive dans le développement JavaScript

Avec la popularité des appareils mobiles, de plus en plus de sites Web et d'applications doivent prendre en compte les problèmes d'adaptation mobile et de mise en page réactive. En tant que langage de développement front-end couramment utilisé, JavaScript joue également un rôle important dans l'adaptation mobile et la mise en page réactive. Cet article combinera l'expérience pratique pour résumer l'adaptation des terminaux mobiles et l'expérience de mise en page réactive dans le développement JavaScript.

1. Adaptation mobile

L'adaptation mobile fait principalement référence aux ajustements correspondants aux différentes résolutions et tailles d'écran des appareils mobiles, afin de rendre l'affichage de la page plus convivial sur différents appareils et d'apporter plus d'avantages aux utilisateurs. Une meilleure expérience utilisateur. Voici quelques techniques d'adaptation de terminal mobile couramment utilisées :

1. Utiliser la fenêtre d'affichage

La fenêtre d'affichage fait référence à la taille de la zone visible du navigateur. Sur les appareils mobiles, la largeur de la fenêtre d'affichage est généralement plus petite que celle de la fenêtre du PC, nous devons donc utiliser des balises méta pour indiquer au navigateur comment afficher la page. Par exemple :

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

Définissez l'attribut width de la fenêtre d'affichage sur la largeur de l'appareil, afin que la largeur de la page puisse s'adapter à la largeur de l'appareil.

2. Utiliser les unités rem

Lors du processus d'adaptation du terminal mobile, nous utilisons généralement des unités rem au lieu des valeurs de pixels. rem est relatif à la taille de la police de l'élément racine html. D'autres éléments de la page peuvent définir la taille de la police par rapport à l'élément racine pour s'adapter aux appareils de différentes tailles. L'approche générale consiste à définir la taille de la police HTML à 1/10 de la largeur de l'appareil, comme indiqué ci-dessous :

html{
    font-size: 10vw;
}

De cette façon, vous pouvez utiliser des unités rem pour vous adapter à différents appareils.

3. Utiliser la mise en page flexible

La mise en page flexible peut facilement mettre en œuvre une mise en page adaptative des pages mobiles. Nous pouvons utiliser des conteneurs flexibles et des éléments flexibles pour contrôler la mise en page de la page. Par exemple :

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.item{
    flex: 1;
    width: 100%;
}

L'exemple ci-dessus configure un conteneur flexible. Chaque élément flexible répartira uniformément la largeur du conteneur parent et pourra automatiquement s'enrouler. Cela garantit que l’effet d’affichage de la page sur différents appareils est fondamentalement le même.

2. Mise en page réactive

La mise en page réactive signifie qu'une excellente expérience utilisateur peut être vue sur différents appareils. Son idée principale est d'ajuster la mise en page en fonction de la taille de l'écran afin que de bons effets visuels puissent être présentés sur différents appareils. Voici quelques techniques de mise en page réactives couramment utilisées :

1. Utiliser des requêtes multimédias

Les requêtes multimédias peuvent définir différents styles en fonction de la largeur de l'appareil. Par exemple :

@media screen and (max-width: 768px) {
    /* 宽度小于768px时的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 宽度在769px到1024px之间时的样式 */
}

@media screen and (min-width: 1025px) {
    /* 宽度大于1025px时的样式 */
}

L'utilisation de requêtes multimédias peut ajuster automatiquement les styles en fonction des différentes largeurs d'appareil pour obtenir un effet de mise en page réactif.

2. Utilisez des images élastiques

Les images sont également très importantes dans une mise en page réactive. Les images flexibles peuvent ajuster leur taille de manière adaptative en fonction des changements de largeur de l'élément parent. Par exemple :

img{
    max-width: 100%;
    height: auto;
}

Cela peut obtenir des images réactives.

3. Utiliser la disposition en grille CSS

La disposition en grille CSS est une méthode de mise en page relativement nouvelle, qui peut facilement implémenter une mise en page réactive. Par exemple :

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.item{
    grid-column: span 1;
}

L'exemple ci-dessus utilise la disposition en grille pour implémenter une disposition réactive à trois colonnes. La largeur de chaque colonne est adaptative et le nombre et la largeur des colonnes peuvent être automatiquement modifiés.

Résumé

En termes d'adaptation mobile et de mise en page réactive, JavaScript, en tant que langage de développement front-end couramment utilisé, a de nombreuses pratiques d'application. Nous pouvons utiliser la mise en page viewport, rem unit et flex pour nous adapter à des appareils de différentes tailles, et utiliser des requêtes multimédias, des images élastiques et une mise en page en grille CSS pour implémenter une mise en page réactive. Bien entendu, les techniques ci-dessus ne sont que quelques techniques de base et les pratiques spécifiques doivent être ajustées en fonction de la situation réelle.

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!