Tutoriel d'introduction et partage de compétences sur le responsive design basé sur CSS3

Tutoriel d'introduction et partage de compétences sur le responsive design basé sur CSS3

À l'ère de l'Internet mobile d'aujourd'hui, le responsive design est devenu l'une des compétences essentielles pour la conception web. En utilisant CSS3, vous pouvez facilement créer des mises en page Web qui s'adaptent à différentes tailles d'écran et appareils. Cet article vous amènera à vous lancer dans le design réactif et à partager quelques conseils pratiques et exemples de code.

1. Requêtes multimédias

Les requêtes multimédias sont la base du responsive design. Elles peuvent correspondre à différentes règles CSS en fonction des caractéristiques de l'appareil et de la taille de l'écran. En utilisant les règles @media, nous pouvons définir des styles pour différentes tailles d'écran.

@media screen et (max-width : 768px) {
/ Style appliqué lorsque la largeur maximale est de 768px/
}

@media screen et (min-width : 769px) et (max-width : 1024px) {
/ Styles appliqués lorsque la largeur est comprise entre 769 px et 1024 px /
}

@media screen et (largeur min : 1025 px) {
/ Styles appliqués lorsque la largeur minimale est supérieure à 1024 px /
}

Through requêtes multimédias, nous pouvons définir la mise en page, la taille de la police, le nombre de colonnes et d’autres attributs pour différentes tailles d’écran. De cette façon, de bons effets d'affichage peuvent être obtenus sur différents appareils.

2. Mise en page fluide

La mise en page fluide est une méthode de mise en page courante du design réactif. En définissant la largeur d'un élément en pourcentage, la page peut s'adapter à différents appareils.

.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}

Dans l'exemple de code ci-dessus, une largeur maximale est définie pour le conteneur lors de son alignement central. De cette façon, quel que soit l'appareil sur lequel la page est ouverte, le conteneur s'ajustera automatiquement en fonction de la largeur de l'appareil.

3. Images flexibles

Les images sont également l'un des éléments importants de la conception Web. Afin de rendre l'image adaptative sur des appareils de différentes tailles, vous pouvez utiliser l'attribut background-image et l'attribut background-size de CSS3.

.image {
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}

Dans l'exemple ci-dessus, l'image est définie comme image d'arrière-plan , et Grâce aux attributs de couverture et de centre, il peut être adaptatif et centré sur des appareils de différentes tailles.

4. Masquer et afficher des éléments

Lors de la conception d'une page Web réactive, vous devez parfois masquer ou afficher certains éléments en fonction de la taille de l'appareil. Vous pouvez utiliser l'attribut d'affichage CSS3 pour réaliser cette fonction.

@media screen et (max-width : 768px) {
.element {

display: none;

}
}

Dans l'exemple de code ci-dessus, lorsque la largeur de l'appareil est inférieure à 768px, l'élément sera masqué.

5. Utiliser la mise en page flexbox

Flexbox est une nouvelle méthode de mise en page en CSS3, qui permet d'obtenir plus facilement une conception réactive des pages Web. Une mise en page adaptative peut être obtenue en définissant l'attribut flex sur les conteneurs et les éléments enfants.

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

Dans l'exemple de code ci-dessus, le conteneur est défini sur une disposition flexible et ses éléments enfants sont alignés à gauche et à droite au centre.

Résumé

Cet article présente le tutoriel d'introduction et les techniques courantes de conception réactive basée sur CSS3. En utilisant des requêtes multimédias, des mises en page fluides, des images flexibles, des éléments masqués et affichés et des mises en page flexibles, vous pouvez facilement créer des mises en page Web qui s'adaptent à différentes tailles d'écran et appareils. J'espère que cet article pourra aider tout le monde à se lancer dans le design réactif.

Référence :

• https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

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!