8.7 responsiveness/responsivité/réactivité (?) CSS

1. Ne rien faire et laisser les utilisateurs mobiles zoomer pour lire votre site Web
2. Créez un deuxième site Web, comme m.facebook.com, et redirigez les appareils mobiles vers ce site.
3. Utiliser une conception Web réactive/responsive.

Appareil, navigateur, fenêtre

Avant d’aller plus loin, il faut définir quelques termes :

device/dispositif

le matériel utilisé : smartphone, tablette, pc ou ordinateur portable

browser/navigateur

le logiciel exécuté : Firefox, Google Chrome, Safari, Internet Explorer

viewport/fenêtre d’affichage

l’espace dans le navigateur qui affiche réellement la page Web

Site Web « Responsif »

L’idée de web design « responsif » (responsive web design) est de faire en sorte que votre site Web s’adapte à n’importe quel appareil.
Pour ce faire, il cible les périphériques à l’aide du code CSS et applique certains styles uniquement à ces périphériques.

La « réactivité » dépend des propriétés de l’appareil ou de la fenêtre d’affichage. Par exemple :

• quelle est la largeur de la fenêtre ?
• quelle est la hauteur de la fenêtre ?
• comment la fenêtre est-elle orientée ?
• quelle est la résolution de l’appareil ?

En fonction de la réponse à ces questions, un CSS « réactif » appliquera des règles CSS différentes ou supplémentaires.

Jusqu’à présent, chaque partie de notre CSS était utilisée par tous les appareils ayant accédé à notre page Web. La conception Web réactive nous permet d’appliquer certains styles dans certains cas.

media queries

Nous avons besoin d’écrire dans notre CSS « des blocs » qui ne seront utilisés que par des périphériques correspondant aux critères de ce bloc. Ces blocs sont appelés requêtes multimédia – media queries.

La syntaxe de la requête multimédia rappelle la syntaxe des images clés d’animation, car elle définit « un bloc dans le CSS », dans lequel vous écrivez des règles CSS supplémentaires qui ne sont appliquées que dans certains cas.

/* This part is read by every device/viewport */
body { font-size: 14px;}

@media (min-width: 1200px) {
  /* This part is only read by viewports wider than 1200 pixels */
  body { font-size: 16px;}
}

Ici, la taille de texte par défaut est 14px. Toutefois, pour pouvoir disposer de fenêtres plus grandes, la taille du texte est définie sur 16px si la fenêtre est plus large que 1200 pixels.

N’oubliez pas que nous parlons de la fenêtre d’affichage, pas de l’appareil.

Sur mobile, les navigateurs fonctionnant en plein écran, les deux largeurs sont interchangeables. Si vous êtes sur le bureau, redimensionnez la fenêtre de votre navigateur pour voir les requêtes de média activées / désactivées.

Plusieurs paramètres

Vous pouvez exiger 2 conditions pour qu’une requête multimédia soit activée.

body { font-size: 18px;}

@media (min-width: 1000px) and (orientation: landscape) {
  body { font-size: 20px;}
}

La taille de la police ne sera définie sur 20px que si la fenêtre est au moins 1000px large et en mode paysage (par opposition au mode portrait).

Vous pouvez également utiliser not et only. Celles-ci sont appelées opérateurs logiques.

Plusieurs règles CSS

Vous pouvez inclure autant de règles CSS que vous le souhaitez dans la requête multimédia.

body { font-size: 14px;}
.button { display: block;}
.title { text-align: center;}

@media (min-width: 1200px) {
  body { font-size: 16px;}
  .container { margin: 0 auto; width: 960px;}
  .button { display: inline-block;}
  .title { text-align: left;}
}

Paramètres

Les requêtes multimédias nécessitent des paramètres qui agissent comme des conditions à remplir pour que la requête multimédias soit

En écrivant @media (min-width: 1200px), nous demandons au navigateur de lire ce bloc uniquement si la fenêtre est plus large que 1200px.

width – largeur

Le paramètre width est celui qui est le plus utilisé dans la conception Web « réactive ». Cela vient du fait que les pages Web sont lues verticalement : nous faisons défiler pour lire le contenu caché. En conséquence, la largeur est fixe et limitée, tandis que la hauteur du site Web est variable.

Comme nous ne faisons pas (généralement) de défilement horizontal, nous devons adapter notre conception à la largeur de la fenêtre disponible. Les requêtes multimédia permettent de vérifier cette largeur et d’appliquer certains styles si la fenêtre est plus large que (min-width) ou plus étroite que (max-width) une quantité spécifique de pixels.

Vous pouvez utiliser soit :

• min-width(960px): les styles ne seront appliqués que si la fenêtre est plus large que 960px
• max-width(768px): les styles ne seront appliqués que si la fenêtre est plus étroite que 768px

Ces paramètres acceptent les pixels, ems et rems.

Chaque fois que vous redimensionnez votre fenêtre d’affichage, le navigateur recherche dans le CSS les requêtes de média comportant des paramètres de largeur et applique les styles en conséquence.

height – hauteur

Le paramètre height fonctionne comme celui de width, mais il vérifie la hauteur de la fenêtre.

Vous pouvez utiliser min-height et max-height.

Il est rarement utilisé, car les sites Web défilent principalement verticalement, et ont rarement besoin d’adapter leur conception pour des fenêtres plus courtes.

orientation

The orientation parameter can detect if the viewport is in either of the following modes:
Le paramètre orientation peut détecter si la fenêtre est dans l’un des modes suivants :

• landscape (paysage) : la fenêtre est plus large que haute
• portrait (portrait) : la fenêtre est plus haute que large

@media (orientation: portrait) {
  /* For vertical viewports */
}

@media (orientation: landscape) {
  /* For horizontal viewports */
}

Bien qu’il soit principalement utilisé pour les tablettes et les smartphones, sachez que même sur un moniteur grand écran, la fenêtre peut être en portrait si sa largeur est inférieure à sa hauteur.

Sur le mobile, même si vous tenez votre appareil en mode portrait, si le clavier s’affiche, la fenêtre de visualisation peut être considérée comme un paysage, compte tenu de la réduction de sa hauteur par rapport à sa largeur.

resolution – résolution

Le paramètre de résolution est lié à la densité de pixels du périphérique et peut être exprimé en points par pouce – dots per inch dpi ou en points par centimètre – dots per centimeter dpcm.

Cela dépend de :

• quelle est votre résolution (1440×900, 1280×800, 1024×768, etc.)
• quelle est la diagonale de votre écran (comme 11,6 ’’, 14 ’’, 21 ’’ etc.)

La densité de pixels indique essentiellement la netteté de votre écran (plus le nombre de dpi est élevé, plus l’écran est net).

@media (min-resolution: 300dpi) {
  /* */
}

Les écrans de bureau ont généralement une densité de pixels d’environ 100 dpi. Les smartphones, en revanche, offrent une gamme incroyable de dpi. Par exemple :

• Nokia Lumia 640 : 332dpi
• Apple iPhone 6+ : 401dpi
• Google Nexus 5 : 445dpi
• HTC One : 469dpi
• Samsung Galaxy S6 : 577dpi

Quel rôle joue le CSS ici ? Eh bien, les écrans de résolution supérieure rendront le texte très clairement : les pixels individuels deviennent à peine perceptibles, et les lettres ont une apparence absolument lisse.

Le problème est avec les images sur les écrans Retina par exemple. C’est un long sujet, alors lisez cet article «Techniques CSS pour les écrans Retina» sur sitepoint.

Un cas d’utilisation serait de fournir une image d’arrière-plan par défaut pour chaque périphérique et d’appliquer des images d’arrière-plan haute résolution sur les écrans Retina.

/* 40x40 logo */
.logo { background-image: url(marksheet-logo.png); background-size: 40px 40px;}

@media (min-resolution: 300dpi) {
  /* 80x80 logo resized to 40x40 */
  .logo { background-image: url(marksheet-logo@2x.png);}
}

N’oubliez pas que la taille de l’arrière-plan doit être définie. Sinon, l’image @2x Retina prendrait deux fois plus d’espace.

Le suffixe @2x n’est que la notation d’Apple pour les images Retina et a été adopté comme notation de facto par défaut en CSS.

Mobile-first ou desktop-first
(Mobile d’abord ou bureau d’abord)

Généralement, vous souhaitez commencer par vous concentrer sur la version de bureau pleine largeur, car elle présente une conception plus complexe comprenant des colonnes, des états de survol, un positionnement absolu, des éléments flotteurs, etc.

Mais concevoir la version mobile en premier est en réalité plus simple si l’on considère qu’un «HTML est presque 100% réactif, prêt à l’emploi». La plupart des conceptions Web sur mobile ne se concentrent que sur les dispositions verticales, avec peu ou pas de colonnes, car le défilement est naturel sur les appareils mobiles.

Utiliser le Flux/Flow est simple pour concevoir un site mobile : il vous suffit d’ordonner vos éléments HTML de la façon dont vous souhaitez les afficher. En écrivant simplement votre code HTML, vous concevez déjà votre site Web mobile. En-tête d’abord, menu ensuite, ensuite votre contenu et un pied de page à la fin. Voilà !

Un CSS de type « mobile first » (les mobiles d’abord) utiliserait des requêtes multimédia de largeur minimale min-width pour appliquer des règles spécifiques à de plus grandes fenêtres :

/* General CSS rules for every viewport, including smartphones */
body { }
.title { }
.button { }

@media (min-width: 768px) {
  /* Rules for tablets and bigger viewports */
}

@media (min-width: 992px) {
  /* Rules for laptops, small desktop screens and bigger viewports */
}

@media (min-width: 1200px) {
  /* Rules for larger desktop screens only */
}

Une approche centrée sur « desktop-first » (les ordinateurs de bureau d’abord) avec les styles pour les grands écrans et les requêtes multimédia de largeur minimale min-width afin d’appliquer des règles spécifiques aux grandes fenêtres :

/* General CSS rules for every viewport, including large desktop screens */
body { }
.title { }
.button { }

@media (max-width: 1199px) {
  /* Rules for laptops, small desktop screens, and smaller viewports */
}

@media (max-width: 991px) {
  /* Rules for tablets and smaller viewports */
}

@media (max-width: 767px) {
  /* Rules for smartphones only */
}

Notez que les valeurs de largeur maximale max-width du premier « bureau » sont inférieures de 1 à la largeur minimale min-width du premier mobile. Par exemple :

• @media (min-width: 768px) cible les tablettes

• @media (max-width: 767px) ne cible pas les tablettes