_blank

_Blank – Etape 15 – Écran de bureau, Tablettes et Smartphones…

8 mai 2019

1Préambule

En matière de responsive design, on peut définir des points de rupture dans sa feuille de style. Ce sont les tailles pour lesquelles l’affichage change sur le site.

Les media queries permettent en CSS3 de changer les conditions d’affichage des éléments en fonction du périphérique qui l’affiche.
(Adapter l’affichage de son site internet selon le terminal utilisé : smartphone, tablette ou ordianteur de bureau.)
Ces points de rupture se définissent dans la feuille de style.

Pour mettre en place un point de rupture, il suffit d’écrire une media query pour les tailles supérieures et une media query pour les tailles inférieures.

Voici un exemple avec 500px :

@media only screen and (min-width: 501px) {
/* Appareils avec une résolution au-dessus de 500px */
}
@media only screen and (max-width: 500px) {
/* Appareils avec une résolution de 500 pixels ou moins */
}

Les media query permettent de mettre en place autant de conditions que l’on veut. On peut également modifier l’affichage du site si le périphérique qui l’affiche est en portrait, comme un smartphone. On peut également se baser sur la talle de 768 pixels qui permet de différencier les smartphones des tablettes.

@media only screen and (min-width: 768px) {
/* tablettes et ordinateurs */
}
@media only screen and (max-width: 767px) {
/* smartphone */
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
/* smartphone en mode portait */
}

2Mes points de rupture…

320px (280px + 320px)
540px (480px + 540px)
640px (600px + 640px)
800px (768px + 780px + 800px)
980px
1024px

Ces points de rupture – utilisés dans de nombreux projets – me permettent de répondre à un ensemble sans cesse croissant de terminaux et de rester cohérent dans la mise en place d’une architecture.
[Pour les valeurs entre parenthèses lisez-le comme suit : (280px + 320px) = Modification induites pour 320px auront un impact sur les terminaux en 280px]

Il arrive très souvent que tous ces media-queries ne soit pas utilisés/impactés pour/par nos corrections, mais plutôt choisis afin de parfaire l’ensemble.

Pour ma part, je suis plus adepte du « max-width= » que du « min-width= », mais la feuille de style de skeleton a été conçue dans l’esprit du mobile-first (d’abord le développement sur mobile) et « min-width= ».
Toutes les règles définies le sont pour les mobiles et ensuite corrigées pour les autres terminaux…

L’essentiel de la grille est pensée pour les smartphones…

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

Corrigé aussitôt – sur des valeurs dont nous nous accommoderons – pour les différents terminaux…

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

Aussi, ce que je comprends de l’exemple avec 500px précédent c’est que pour toucher toucher les terminaux qui ont une résolution de plus de 500px il me faut utiliser la règle

@media only screen and (min-width: 501px) {
/* Appareils avec une résolution au-dessus de 500px */
}

Donc, si je reprends ma grille…

@media only screen and (min-width: 481px) {
/* Appareils avec une résolution au-dessus de 480 */
}

@media only screen and (min-width: 541px) {
/* Appareils avec une résolution au-dessus de 540 */
}

@media only screen and (min-width: 641px) {
/* Appareils avec une résolution au-dessus de 640 */
}

@media only screen and (min-width: 801px) {
/* Appareils avec une résolution au-dessus de 800 */
}

@media only screen and (min-width: 981px) {
/* Appareils avec une résolution au-dessus de 980 */
}

@media only screen and (min-width: 1025px) {
/* Appareils avec une résolution au-dessus de 1024 */
}

3Modification

Faire une copie de sauvegarde de la feuille de style skeleton.css avant toute modification et pour sauvegarde…
Ouvrir skeleton.css dans Notepad++
Ligne 82 > Remplacer la valeur de 550px par 801px
(ATTENTION – si une mise-à-jour de la feuille de style devait avoir lieu, n’oubliez pas de reporter les modifications ici réalisées dans la nouvelle version…)
(Vous pouvez également modifier cette valeur de 550px ligne 51 par 800px dans le commentaire.)

Explication
L’opération précédente sert à modifier le point de rupture qui détermine la largeur (et donc le type de terminal visé) auquel le « système de colonnes – la grille » devient visible pour l’internaute.

4Point de rupture – 980px

Ouvrir en lecture indexAll.html dans Firefox
Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 980px
Observer

Rien ne semble incohérent, tout semble lisible – pas de modification à apporter.

5Point de rupture – 800px

Ouvrir en lecture indexAll.html dans Firefox
Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 800px
Observer
> Problème constaté dans la section  (ligne 62)
(Pour ce type de terminal, et tous les terminaux compris entre 640px et 800px, nous devrions avoir deux lignes.
Les deux premiers appel d’un service/produit occupent la moitié de la première ligne.
Le dernier appel occupe 100% de la seconde ligne.)

Modifications

Ouvrir > indexAll.html dans Notepad++
Ligne 63 > <div class="row"> devient <div class="row appels">
Ouvrir > monstyle.css dans Notepad++
Ligne 136 > Ajouter

@media screen and (min-width: 641px) and (max-width: 800px) {
.row.appels .four.columns {
width: 48%;
margin-left: 4%!important;
float: left;
}
.row.appels .four.columns:first-child {
margin-left: 0!important;
}
.row.appels .four.columns:last-child {
margin-left: 0!important;
width: 100%;
margin-top: 20px;
}
}

Explication

Ligne 63 du ficher index-ALL.html > ajouter au <div> la class appels permet de le cibler plus précisément et de définir des modifications qui n’affecteront que les <div> qui ont comme attribut la class appels.
Ligne 136 du fichier monstyle.css
> @media screen and (min-width: 641px) and (max-width: 800px) {…}
Ne sont ciblés que les terminaux dont la largeur minimale est de 641px et la largeur maximale de 800px (donc, 768px, 780px, 800px).
A 640px, on retrouve le comportement natif défini par skeleton.css.
A 801px, on retrouve le comportement natif défini par skeleton.css.

6Point de rupture – 780px/768px

Ouvrir en lecture indexAll.html dans Firefox
Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 780px
> Développement web > Vue adaptive > Fixer la largeur à 768px
Observer

Rien ne semble incohérent, tout semble lisible – pas de modification à apporter.

7Point de rupture – 640px

Ouvrir en lecture indexAll.html dans Firefox
Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 640px
Observer
> Problème constaté > Les images imbriquées dans le texte ne rendent pas la lecture fluide…

Modifications

Ouvrir > monstyle.css dans Notepad++
Ligne 152 > Ajouter

@media screen and (max-width: 640px) {
.imgGauche, .imgDroit {
float: none; /* Ne permet plus l'habillage du texte */
display: block; /* Change le rendu écran des images */
margin-left: auto; /* Les marges Gauche et Droite en auto */
margin-right: auto; /* Permet de centrer l'élément */
margin-bottom: 20px; /* 'Décoller' le texte qui suit de l'image */
}
figure {
text-align: center; /* Tous les éléments contenus dans la balise figure seront restitués centrés à l'écran */
}
}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

Explication

Ligne 152 du fichier monstyle.css
> @media screen and (max-width: 640px) {…}
Ne sont ciblés que les terminaux dont la largeur maximale est de 640px (donc tous les terminaux jusqu’à 640px – 280px, 320px, 480px, 540px, 600px 640px).
Ligne 153 du fichier monstyle.css
> .imgGauche, .imgDroit {…}
Nous permet de corriger le comportement précédemment défini pour les terminaux plus large que 640px, sur les class imgGauche et imgDroit simultanément pour qu’elles adoptent un seul et même comportement.
(Chassant le texte, centré et une marge sous l’image de 20px)
Ligne 160 du fichier monstyle.css
> figure {…}<br /><br /><br /><br /><br /><br /><br /><br />Nous permet de corriger le comportement de la balise figure.
Tout ce qu’elle contiendra sera centré – le style sera hérité par les enfant img et figcaption contenu dans figure – l’image, le titre associé à l’image et la légende

8Point de rupture – 600px/540px/480px/320px/280px

Ouvrir en lecture indexAll.html dans Firefox
Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 600px
> Développement web > Vue adaptive > Fixer la largeur à 540px
> Développement web > Vue adaptive > Fixer la largeur à 480px
> Développement web > Vue adaptive > Fixer la largeur à 320px
> Développement web > Vue adaptive > Fixer la largeur à 280px
Observer

Rien ne semble incohérent, tout semble lisible – pas de modification à apporter.
MAIS – les images posent problème dès 540px – elles sortent du format – et donc ne sont plus lisibles.

Ouvrir monstyle.css dans Notepad++
Ligne 20 > ajouter

img {
max-width: 100%;
height: auto;
}

Explication
Nous altérons la propriété de la balise <img> en spécifiant que la largeur maximale d’une image soit de 100% > max-width:100; – et pour garder l’homothétie des images, nous indiquons la hauteur sera adaptée à la largeur de l’image – height: auto;.
Si l’image est plus grande que son contenant, sa largeur sera de 100% du dit contenant – quelque soit ce contenant – et sa hauteur s’adaptera homothétiquement.
Cette règle est sortie de toute contrainte/spécificité d’une quelconque largeur de terminal, elle n’est pas intégrée à un media query, elle s’applique à tous les terminaux – Smartphone, Tablette, Ordinateur de bureau.

Précédent Suivant