Trucsweb.com

Trucsweb.com

CSS

Bootstrap

RDFFav

Structure CSS adaptative et media Queries

Une « Structure CSS adaptative » ou la fluidité du contenu, un art d’adaptation!site web adaptatif, responsif web design, design Web adaptatif, design responsiveStructure CSS adaptative et media Queries

La fluidité du contenu
Dessin illustrant le principe du responsive design ou Site web adaptatif, Auteur :  Stéphanie Walter (Source : Wikipedia)
Stéphanie Walter (Source : Wikipedia)

Une « Structure CSS adaptative » (Responsive CSS Frameworks) est une collection de classe CSS destinée à automatiser la conception des sites web adaptatifs (Responsive web design RWD). De plus en plus populaire, cette technique consiste à adapter la mise en page selon l’environnement. Ce qui assure une grande accessibilité peu importe la plate-forme. L’utilisateur peut ainsi consulter le même site web à partir d’une large gamme d’appareils (ordinateur de bureau, téléphones intelligents, tablettes, iPods, TV, etc.) avec le même confort et la même facilité de navigation.

En résumé c’est essentiellement un affichage conditionnel et surtout proportionnel. Rien de nouveau, Les Trucsweb.com occupe 100% de l’espace disponible depuis toujours ;-) il y a les mesures « em » et « % » pour s’adapte aux dimensions de l’écran ou de l’espace total. Ce qu’il y a de nouveau, outre le fait que le nombre de résolutions différentes a explosés, c’est sans aucun doute les « Media Queries » et ses nombreuses propriétés.

Les librairies « Bootstrap 3 » ou « Foundation 5 » son essentiellement construite sur cette assise. Notamment avec un système de grille (grid), de pourcentage et 100 à 200 kilo-octets de code. Personnellement j’ai choisie Bootstrap pour les Trucswe.com, plus légé, mais effectivement lourd, combiné avec la trôlé de composantes, les dictionnaire... Il faut préciser que ce type de librairie déconstruit au passage l’ensemble des classes CSS. Poids lourd mais aussi gourmand en ressources. C’est donc automatisé, rapide, pratique, à la porter de tous et tout aussi pratique pour la recherche et développement. Mais nul besoin de réinventer le monde pour changer les dimensions d’un logo ou supprimer les marges d’une image sur un mobile...

La fluidité du contenu, un art d’adaptation!

Dans l’exemple suivant j’ai une image alignée à droite et limitée à 250 pixels max-width:250px; avec une marge à gauche de 2em. Exactement comme l’image de ce tutoriel. Voilà le code appliqué pour une largeur maximum de 300 pixels (0-300).

<style>
@media (max-width: 300px) {
  figure {
    width: 100%; /* largeur à 300px */
    margin-left:0; /* supprimer la marge */
    /* Optionnel float:none; // Supprimer l’alignement */
    max-width:300px; /* Annuler le max-width:250px; */
  }
  figcaption {
    font-size:1.2em;
  }
}
</style>

Jouez avec la grandeur de la page et observer l’image quand la largeur passe au dessous de 300px. L’effet est vraiment intéressant. Comme on peu voir j’ajoute au moins 50 pixels en zoomant l’image pour éviter l’écrasement du texte à gauche. Il faut idéalement une image déjà à 300 pixels de large pour une bonne qualité. Voir à ce sujet « Retina et les images adaptatives ».


Media Queries

Il n’a pas été retenu par le CSS1 mais le CSS2 permettait déjà d’associer une feuille de style selon les différents types de médias. Par exemple : « screen » and « print ». Avec les « Media Queries », le CSS3 va bien au delà et permet des ajustement selon la grandeur maximale et minimum de l’écran par exemple avec les propriétés min-width ou max-width. Voir la Référence complète (device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid).

<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css" />

Ou directement dans la feuille de style :

<style>
@media (min-width: 992px) {...}
<style/>

Quand la résolution horizontale est égale à 800 pixels :

<style>
@media screen and (device-width: 800px) {...}
<style/>

On peut aussi les combiner :

<style>
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 img {
  margin: 2em;
 }
 h1 {
  font-size: 1.2em;
 }
}
<style/>

Un bon exemple pour détecter les petits écrans 2x et donc Retina :

<style>
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

  /* Petit écran Retina */
  .image {
    background: url(images/image-hd.png) no-repeat;
  }

}
<style/>

Il existe plus d’une solution par concepteur tant il y a de combinaisons possibles! Mais on utilise en général, pour éviter aux mobiles une charge inutile, le « mobile-first » ou le « mobile en premier ». C’est-à-dire basé sur le plus petit écran ou le min-width. L’idée est de placer au début les styles et classes génériques qui s’appliquent à tous les supports. Il faut donc cibler les écrans larges, par exemple @media (min-width: 1200px) {} pour construire le site principal (en principe).

Bureau HD
1200px
Bureau
1000px
Tablette
750px
Phablette
550px
Mobile
400px
Nouvelles valeurs

À noter les nouveaux types de valeur automatisée :

min-content

La largeur minimale. La mesure de min-contenu est défini à partir du plus petit élément, par exemple un mot ou une image... Petit truc, ajouter une balise <nobr>autour d’une phrase</nobr> pour la considérer comme un block.

max-content

La largeur maximale. La mesure de man-contenu est défini à partir du plus grand élément, par exemple un mot ou une image...

fill-available

La largeur disponible. La mesure de fill-available est défini à partir de l’espace disponible. Une dimension adaptative comme dirait l’académie.

fit-content

La largeur est définie par le contenu et il ne sera pas ajusté pour remplir l’espace disponible.

Des codes pour s’adapter mais incompatibles, c’est même devenu systématique! Faire d’un accommodement une norme! Comme à l’habitude donc, de haut en bas :

<style>
.exemple-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.exemple-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.exemple-fill {
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
}
.exemple-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
</style>

Unités de mesure

On ne traitera pas ici des mesures statiques, encore moins des centimètres, pouces, points, picas impossibles à distinguer sur un écran.

%

Pourcentage de l’espace disponible;

em

Relativement à la taille de la police de caractères. Par exemple une marge relativement à la grandeur de la police;

rem

Racine "em" est la taille de la police de l’élément racine du document. Le « rem » est constant dans tout le document;

vh, vw

« Viewport Sized » respectivement égal à 1/100ème de la hauteur et de la largeur de la fenêtre. Ce dernier est compatible IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ mais avec plusieurs problèmes.

Exemple avec grille (grid)

La grille est toujours la seule façon d’organiser et d’aligner le contenu sur une page web. L’entête, le pied de page, colonne. Exploité au maximum depuis AltaVista, cet espace sollicite l’attention de l’internaute par bloc d’information. Il faut s’afficher le plus haut possible. 15 ans plus tard on en est toujours là avec la différence que c’est le CSS qui fait le travail! J’aurais d’ailleurs préféré une nouvelle balise HTML5 <grid> au lieu d’un <figcaption> inutile que le CSS aurait très bien pu gérer! Et c’est ici que nos fameuses librairies comme « Bootstrap » ou « Foundation » son devenu quasi indispensables. D’une part pour aligner plusieurs colonnes mais aussi pour changer le nombre de celle-ci quand la largeur ne le permet plus. C’est bien beau le pourcentage mais 12 colonnes sur un ipod, « ça fit pas pen toute! »

L’idée est toute simple, pas besoin d’une librairie à 100k pour deux petite classes, « col-1 » et « col-2 » à 50%.

<style>
.col-1, .col-2 {
  width: 50%;
  float: left;
  text-align:right;
}
.col-1 {
  text-align:right;
}
</style>

<div class="col-1">Colone 1 (50%)</div>
<div class="col-2">Colone 2 (50%)</div>

La méthode du cet étalement d’espace ne convient pas au petit écran. Il suffit donc de tester le max-width, par exemple à 400px, et de changer la largeur des colonnes pour 100% si t’elle est le cas.

<style>
@media (max-width: 400px) {
  .col-1, .col-2 {
    width: 100%;
    text-align:left;
  }
}
</style>

Exemple complet, avec une marge de 1% entre les deux colonnes :

<html>
  <style>
.col-1 {
  width: 49%;
  float: left;
  text-align:right;
  background-color:#ccc;
}
.col-2 {
  width: 49%;
  float: right;
}
 
@media (max-width: 400px) {
  .col-1, .col-2 {
    width: 100%;
    text-align:left;
  }
}
</style>
  <body>
    <div class="col-1">Colone 1</div>
    <div class="col-2">Colone 2</div>
  </body>
</html>
Exemple avec une image
<style>
.vignette {
	width:100%;
	max-width:250px;
  background: #EFEFEF;
  border: 1px solid rgba(0,0,0,.1);
  padding: 1em;
  overflow:auto;
  margin-bottom:20px;
}

.vignette > img {
  display: block;
}

.vignette figcaption {
  padding: .2em 0;
  font-size: .8em;
  font-color:#999999;
}
.gauche {float:left;margin-right:2em;margin-right:2sv;}
.droite {float:right;margin-left:2em;margin-left:2sv;}
.img-sensible {width:100%;max-width:250px;}
@media all and (max-width: 699px) and (min-width: 451px) {
  .vignette {
  	width:100%;
    background: #EFEFEF;
    border: 1px solid rgba(0,0,0,.1);
    padding: .5em;
    margin:0;
    margin-right:1em;
    margin-left:1em;
  }	
}
@media all and (max-width: 450px) {
  .vignette {
  	width:100%;
  	max-width:100%;
    background: #EFEFEF;
    border: 1px solid rgba(0,0,0,.1);
    padding: .5em;
    margin:0 0 10px 0;
    float:none;
  }
  .vignette img {
    width:100%;
    max-width:100%;
    min-width:100%;
  }
}
</style>

<figure class="vignette droite">
<h5 style="text-align:center;">La fluidité du contenu</h5>
  <img src="http://www.trucsweb.com/documents/images/2014/content-is-like-water-1980.jpg" alt="Image" class="img-sensible">
  <figcaption>Stéphanie Walter (Source : Wikipedia)</figcaption>
</figure>
Ressources
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

9/10 sur 1 revues.
       Visites : 28215 - Pages vues : 28610
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@