RWD Media Query

Responsive web page
Concevoir des pages web pour une meilleure expérience pour tous les utilisateurs
Les pages web peuvent être visités à travers plusieurs appareil : tablette, téléphone, desktop. Ainsi,
une page web Votre page Web doit être belle et facile à utiliser, quel que soit l'appareil.
Les pages Web ne doivent pas omettre des informations pour s'adapter aux appareils plus petits,
mais plutôt adapter leur contenu pour s'adapter à n'importe quel appareil.
Viewport (fenêtre d’affichage)

Viewport est la zone visible par l'utilisateur d'une page Web.
Viewport varie selon l'appareil et sera plus petite sur un téléphone mobile que sur un écran
d'ordinateur.
HTML5 a introduit une méthode permettant aux concepteurs Web de prendre le contrôle de la
fenêtre d'affichage, via la <meta>balise.
Vous devez inclure l' <meta>élément de fenêtre suivant dans toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à
l'échelle de la page.
La partie width=device-width définit la largeur de la page pour suivre la largeur de l'écran de

l'appareil (qui varie selon l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la
première fois par le navigateur.
Dimensionner le contenu du viewport

Les utilisateurs sont habitués à faire défiler les sites Web verticalement sur les ordinateurs de bureau
et les appareils mobiles - mais pas horizontalement !
Ainsi, si l'utilisateur est obligé de faire défiler horizontalement ou de faire un zoom arrière pour voir
l'intégralité de la page Web, l'expérience utilisateur est médiocre.
Des règles à respecter :
 N'utilisez PAS d'éléments de grande largeur fixe

 Ne laissez PAS le contenu s'appuyer sur une largeur de fenêtre particulière
 Utilisez des CSS media query pour appliquer un style différent pour les petits et les grands
écrans
Media query :
introdution
Media query est une technique CSS introduite dans CSS 3. Il utilise une règle @media pour introduire
des règles CSS si une condition est vraie.
Exemple :
@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}
Si la fenêtre à une taille supérieure ou égale à 600px la couleur de l’arrière-plan sera lightblue
Les requêtes multimédias peuvent être utilisées pour vérifier de nombreuses propriétés, telles que :
• Largeur et hauteur du viewport
• Largeur et hauteur de l'appareil
• Orientation (mode paysage ou portrait)
• Résolution
Syntaxe du media query

Une media query se compose d'un type de média et peut contenir une ou plusieurs expressions, qui
se résolvent en vrai ou en faux.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Vous pouvez également avoir différentes feuilles de style pour différents médias :
<link rel="stylesheet" media="mediatype and|not|only
(expressions)" href="print.css">
Les types de media :
valeu Description
r
Utilisé pour tous les appareils de type média

all
print Utilisé pour les imprimantes
screen Utilisé pour les ordinateurs, tablettes, téléphone…….
speech Utilisé pour les lecteur d’écran ( screenreaders)
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */

.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */

.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
.example {background: pink;}
}
</style>
</head>
<body>
<h2>Typical Media Query Breakpoints</h2>

<p class="example">Resize the browser window to see how the background color
of this paragraph changes on different screen sizes.</p>
</body>
</html>
Source : https://www.w3schools.com/

RWD Media Query

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

RWD Media Query

Transféré par

Droits d'auteur :

Formats disponibles

Responsive web page

Viewport (fenêtre d’affichage)

La partie width=device-width définit la largeur de la page pour suivre la largeur de l'écran de

Dimensionner le contenu du viewport

Des règles à respecter :

 N'utilisez PAS d'éléments de grande largeur fixe

@media only screen and (max-width: 600px) {

• Largeur et hauteur du viewport

• Largeur et hauteur de l'appareil

• Orientation (mode paysage ou portrait)

Syntaxe du media query

Les types de media :

Utilisé pour tous les appareils de type média

screen Utilisé pour les ordinateurs, tablettes, téléphone…….

speech Utilisé pour les lecteur d’écran ( screenreaders)

/* Medium devices (landscape tablets, 768px and up) */

/* Large devices (laptops/desktops, 992px and up) */

<h2>Typical Media Query Breakpoints</h2>

Vous aimerez peut-être aussi