CSS - Adaptation aux média

(Responsive Web Design)

M. BOUMEDIENE

Institut National des Télécommunications et des Technologies

de l’Information et de la Communication
e-mail: mboumediene[at]inttic.dz

xx xxxx 2020

1/12 Mohammed Boumediene - INTTIC Technologies web 1

 Plan

1 Introduction

2 Requêtes Média (Media Queries)

3 Comment utiliser les requêtes média (media queries) ?

2/12 Mohammed Boumediene - INTTIC Technologies web 1

 Introduction

Plan

1 Introduction

2 Requêtes Média (Media Queries)

3 Comment utiliser les requêtes média (media queries) ?

3/12 Mohammed Boumediene - INTTIC Technologies web 1

 Introduction

Responsive Web Design ?

Lors du développement web il faut tenir compte des différentes résolutions d’écrans
de vos utilisateurs (PC, TV, tablette, et smart-phone)
⇒ permet de soigner le design d’un site
⇒ meilleure expérience utilisateur

4/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

Plan

1 Introduction

2 Requêtes Média (Media Queries)

3 Comment utiliser les requêtes média (media queries) ?

5/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média

6/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média
La meilleure technique est d’utiliser les requêtes média (media queries)
@media t y p e and ( p r o p r i e t e : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}

6/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média
La meilleure technique est d’utiliser les requêtes média (media queries)
@media t y p e and ( p r o p r i e t e : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}

type: définit le type de média (screen, print, speech, all)

6/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média
La meilleure technique est d’utiliser les requêtes média (media queries)
@media t y p e and ( p r o p r i e t e : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}

type: définit le type de média (screen, print, speech, all)

Les principales propriétés utilisées dans la définition des requêtes média sont:
width, height: largeur, hauteur de la zone d’affichage;
device-width, device-height: largeur, hauteur du périphérique;
orientation: portrait ou paysage;
color: nombre de bit de pixel consacrés à la couleur;

6/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média
La meilleure technique est d’utiliser les requêtes média (media queries)
@media t y p e and ( p r o p r i e t e : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}

type: définit le type de média (screen, print, speech, all)

Les principales propriétés utilisées dans la définition des requêtes média sont:
width, height: largeur, hauteur de la zone d’affichage;
device-width, device-height: largeur, hauteur du périphérique;
orientation: portrait ou paysage;
color: nombre de bit de pixel consacrés à la couleur;
Ces propriétés numériques peuvent-être préfixées par max- ou min-

6/12 Mohammed Boumediene - INTTIC Technologies web 1

 Requêtes Média (Media Queries)

CSS & Responsive

Il existe plusieurs techniques pour s’adapter aux différents supports média
La meilleure technique est d’utiliser les requêtes média (media queries)
@media t y p e and ( p r o p r i e t e : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}

type: définit le type de média (screen, print, speech, all)

Les principales propriétés utilisées dans la définition des requêtes média sont:
width, height: largeur, hauteur de la zone d’affichage;
device-width, device-height: largeur, hauteur du périphérique;
orientation: portrait ou paysage;
color: nombre de bit de pixel consacrés à la couleur;
Ces propriétés numériques peuvent-être préfixées par max- ou min-
Les requêtes média peuvent être combinées à l’aide d’opérateurs logiques: not,
only, et and.
@media t y p e and ( p r o p r i e t e 1 : v a l u e ) and ( p r o p r i e t e 2 : v a l u e ) {
/∗ l e s t y l e a a p p l i q u é i c i ∗/
}
6/12 Mohammed Boumediene - INTTIC Technologies web 1
 Comment utiliser les requêtes média (media queries) ?

Plan

1 Introduction

2 Requêtes Média (Media Queries)

3 Comment utiliser les requêtes média (media queries) ?

7/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Où écrire les media queries ?

1 En ajoutant tout simple la requête média à la feuille de style existante.

@media s c r e e n and ( min−width : 700 px ) {

div { background−color : red ; }
}

8/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Où écrire les media queries ?

1 En ajoutant tout simple la requête média à la feuille de style existante.

@media s c r e e n and ( min−width : 700 px ) {

div { background−color : red ; }
}

2 En définissant une feuille de style différente en fonction de la requête

⇒ Par exemple, charger le fichier "largeResolution.css" si la résolution est
supérieure à 700px de large:

< l i nk r e l = " s t y l e s h e e t " media= " s c r e e n and ( min−with : 700 px ) "

h r e f = " . / c s s / l a r g e R e s o l u t i o n . c s s ">

8/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Exemple 1 (PageCSS16.html)
L’exemple consiste à changer le background en fonction de la propriété
"orientation"

@media s c r e e n and ( o r i e n t a t i o n : l a n d s c a p e ) {
body { b a c k g r o u n d − c o l o r : c o r a l ; }
}
@media s c r e e n and ( o r i e n t a t i o n : p o r t r a i t ) {
body { b a c k g r o u n d − c o l o r : s k y b l u e ; }
}

9/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Exemple 2 (PageCSS17.html)

Même exemple que le précédent saut qu’on utilise deux feuilles de styles externes

< l i nk r e l = " s t y l e s h e e t " media= " s c r e e n and ( o r i e n t a t i o n :

,→ l a n d s c a p e ) " h r e f = " . / c s s / L a n d s c a p e . c s s ">
< l i nk r e l = " s t y l e s h e e t " media= " s c r e e n and ( o r i e n t a t i o n :
,→ p o r t r a i t ) " h r e f = " . / c s s / P o r t r a i t . c s s ">

Voici les fichiers CSS corresponds :

/∗ L a n d s c a p e . c s s ∗/
body { b a c k g r o u n d − c o l o r : c o r a l ; }

/∗ P o r t r a i t . c s s ∗/
body { b a c k g r o u n d − c o l o r : s k y b l u e ; }

10/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Exemple 3 (PageCSS18.html)

L’exemple consiste à changer le background en fonction de la propriété "width"

body { b a c k g r o u n d − c o l o r : i v o r y ; }
@media s c r e e n and ( min−width : 601 px ) and ( max−width : 900 px ) {
body { b a c k g r o u n d − c o l o r : c o r a l ; }
}
@media s c r e e n and ( max−width : 600 px ) {
body { b a c k g r o u n d − c o l o r : s k y b l u e ; }
}

11/12 Mohammed Boumediene - INTTIC Technologies web 1

 Comment utiliser les requêtes média (media queries) ?

Merci pour votre attention! Des Questions?

12/12 Mohammed Boumediene - INTTIC Technologies web 1