Responsive
L'un des avantages du web est que l'on peut y accéder n'importe où, à partir de presque n'importe quel type d'appareil.
Cela signifie que lorsque nous concevons une page web, nous devons tenir compte non seulement d'un format, mais d'une quantité infinie de formats.
Imaginez que nous ayons 3 colonnes dans notre mise en page, mais lorsque vous accédez au site web sur votre téléphone portable, cela ne correspond pas et nous n'avons besoin que d'une seule colonne.
Avec le CSS, nous pouvons ajuster la déclaration et les sélecteurs pour avoir des valeurs différentes en fonction de la taille de l'écran.
On peut également utiliser des unités qui ne sont pas définitives comme le pourcentage (%) au lieu de pixel (px)
Media Query
On utilise des media queries ou les requêtes des médias pour ajouter des points de changement. Par exemple, nous pouvons dire que le design doit changer pour autre chose lorsque l'écran est plus petit que 1000 px. Comme ci-dessous.
/* Notre CSS par défaut ou globale */
section {
background: red;
width: 100%;
padding: 1em;
}
/* Notre CSS pour les ecrans en sous de 768px */
@media only screen and (max-width:768px) {
section {
background: blue;
}
}Cette méthode peut être appliquée à toutes les déclarations CSS. Si vous voulez changer la couleur, la typographie, c'est tout possible.
Attention, il n'est pas nécessaire de répéter les déclarations, sauf si leur valeur est différente.
C'est important que vous mettez les @media a la fin de votre document style.css après votre CSS de base.
Breaking Points
Lorsque nous concevons pour le web, nous utilisons souvent 3 points de rupture standard pour adapter notre conception au bureau, à la tablette et au mobile. Il s'agit de:
Desktop: > 1024px
Tablet: < 1024px
Mobile: < 768px
Ou bien:
/* Desktop */
section {
background: red;
}
/* Tablet */
@media only screen and (max-width:1024px) {
section {
background: blue;
}
}
/* Mobile */
@media only screen and (max-width:768px) {
section {
background: yellow;
}
}Vous pouvez lire plus ici: