Qu'est-ce que le design web adaptatif ?
Il est impossible d’imaginer le développement web moderne sans conceptions adaptatives/réactives. Cela permet aux utilisateurs d’accéder aux ressources web de manière équivalente sur n’importe quel appareil : smartphone, tablette, ordinateur de bureau ou télévision.
Comment cela fonctionne-t-il ?
- L’équipe de développement définit l’apparence de chaque élément en fonction de la taille de l’écran ;
- Les instructions nécessaires sont intégrées dans le code ;
- Le navigateur surveille les changements de la fenêtre d’affichage (viewport) ;
- Le navigateur applique les règles définies par l’équipe de développement sous forme de code.
Media-queries
Media-query permet la création de conceptions adaptatives/réactives. Grâce à ces requêtes, les développeurs peuvent définir les styles de tout élément en fonction de la taille de l’écran.
Remarque
On peut considérer une media-query comme des instructions : « Si l’écran de l’utilisateur est un ordinateur de bureau, appliquer ces styles à l’élément. Si l’écran de l’utilisateur est un smartphone, appliquer d’autres styles à l’élément. Etc. ».
La syntaxe de base d’une media-query est la suivante :
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>: déclare le type d’appareil. Valeurs possibles :all: valeur par défaut. Si rien n’est spécifié, la règle media s’applique à tous les appareils ;print: la règle media s’applique aux appareils produisant des documents imprimés, comme les imprimantes ;screen: la règle media s’applique à tous les appareils dotés d’un écran physique.
<media_feature>: déclare les caractéristiques de l’appareil. Utilisations les plus courantes :min-width:: largeur minimale de la fenêtre d’affichage ;max-width:: largeur maximale de la fenêtre d’affichage.
<operator>: le type de média et la caractéristique de média sont séparés par un opérateur logique optionnel. Ses valeurs peuvent être :andou,.
Remarque
Dans les chapitres suivants, nous aborderons l’utilisation pratique des media-queries.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you give an example of a media-query in CSS?
What are some common use cases for media-queries?
How do I choose between adaptive and responsive design?
Awesome!
Completion rate improved to 2.04Qu'est-ce que le design web adaptatif ?
Glissez pour afficher le menu
Il est impossible d’imaginer le développement web moderne sans conceptions adaptatives/réactives. Cela permet aux utilisateurs d’accéder aux ressources web de manière équivalente sur n’importe quel appareil : smartphone, tablette, ordinateur de bureau ou télévision.
Comment cela fonctionne-t-il ?
- L’équipe de développement définit l’apparence de chaque élément en fonction de la taille de l’écran ;
- Les instructions nécessaires sont intégrées dans le code ;
- Le navigateur surveille les changements de la fenêtre d’affichage (viewport) ;
- Le navigateur applique les règles définies par l’équipe de développement sous forme de code.
Media-queries
Media-query permet la création de conceptions adaptatives/réactives. Grâce à ces requêtes, les développeurs peuvent définir les styles de tout élément en fonction de la taille de l’écran.
Remarque
On peut considérer une media-query comme des instructions : « Si l’écran de l’utilisateur est un ordinateur de bureau, appliquer ces styles à l’élément. Si l’écran de l’utilisateur est un smartphone, appliquer d’autres styles à l’élément. Etc. ».
La syntaxe de base d’une media-query est la suivante :
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>: déclare le type d’appareil. Valeurs possibles :all: valeur par défaut. Si rien n’est spécifié, la règle media s’applique à tous les appareils ;print: la règle media s’applique aux appareils produisant des documents imprimés, comme les imprimantes ;screen: la règle media s’applique à tous les appareils dotés d’un écran physique.
<media_feature>: déclare les caractéristiques de l’appareil. Utilisations les plus courantes :min-width:: largeur minimale de la fenêtre d’affichage ;max-width:: largeur maximale de la fenêtre d’affichage.
<operator>: le type de média et la caractéristique de média sont séparés par un opérateur logique optionnel. Ses valeurs peuvent être :andou,.
Remarque
Dans les chapitres suivants, nous aborderons l’utilisation pratique des media-queries.
Merci pour vos commentaires !
