Aujourd'hui la majorité des internautes utilisent leur smartphone afin de surfer sur la toile. Ainsi, il est indispensable d'adapter l'affichage de votre site en fonction de la définition d'écran de vos utilisateurs.
Pour cela il existe 2 solutions :
- Avoir un site dédié aux mobiles : une URL pour les mobiles, une autre URL pour les PC.
- Le Responsive Design : ajouter des conditions pour l'application des règles CSS en fonction de la taille de l'écran.
Ce site est développé en Responsive Design, je vais donc vous partager cette méthode.
Habituellement, vous indiquez dans votre fichier.html l'emplacement du style.css afin de gérer l'apparence de vos différents éléments. Le problème qui survient est le suivant : vous êtes satisfait de votre présentation sur un écran de plus de 12 pouces, mais dès que vous visitez votre site sur mobile : l'affichage n'est pas adapté, et la navigation devient laborieuse.
J'ai eu le même problème. C'est pourquoi, je vais vous expliquer comment adapter le CSS selon la taille d'écran de vos utilisateurs.
Ici encore, il y a 2 solutions
- Déclarer 2 fichiers CSS dans la page HTML : le premier adapté aux écrans larges et le second à ceux des smartphones ;
- Déclarer 1 fichier CSS dans la page HTML, en ajoutant la mise en page pour mobile via les media queries ;
I) Méthode avec 2 fichiers CSS :
Je vous recommande vivement cette méthode, dans le cas où la présentation sur mobile diffère vraiment de l'initiale. Cela permet de garder en lisibilité.
Pour ce faire, il vous suffit d'ajouter un second <link rel="stylesheet"...> entre <head> et </head>.
<!-- index.html -->
<head>
<link rel="stylesheet" type="text/css" href="../Style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 980px)" href="../small_size.css">
</head>
A la différence que le second link inclura l'attribut media, qui prendra comme valeur une définition maximum ou mininimum d'écran. Ainsi, si la définition d'écran de l'utilsateur respecte cette condition, alors ce fichier CSS sera prioritaire sur le premier.
Dans cet exemple, si un internaute a une largeur d'écran inférieure à 980 pixels, alors la page sera mise en page (en priorité) avec les règles CSS inscrites dans le fichier small_size.css ; puis les règles CSS de Style.css seront appliquées.
Par contre, lorsque cette même personne accédera à la page depuis un écran ayant une largeur supérieure à 980 pixels : small_size.css sera ignoré.
Ainsi, prenons un exemple, voici le code de Style.css et de small_size.css :
/* Style.css */
p {
color: blue;
text-align: justify;
}
/* small_size.css */
p {
color: red;
}
Dans cette configuration, si l'on accède à cette page depuis un smartphone : small_size.css est prioritaire. Donc, cela signifie que les paragraphes vont s'afficher en rouge. Dans le même temps, Style.css est pris en charge par le navigateur, donc les paragraphes vont se justifier, mais ils vont rester en rouge, du fait de la priorité due à la condition lors de la déclaration des fichiers css.
En effet, retenez qu'en CSS, lorsqu'il y a un conflit de ciblage, c'est à dire lorsque un même élément HTML est stylisé plusieurs fois en CSS, le style retenu sera celui où l'élément sera cité le plus précisément.
Par contre, si l'utilisateur accède à la page depuis un écran d'ordinateur, small_size.css sera ignoré, les paragraphes seront donc justifiés, en bleu.
Il s'agit bien évidemment d'un exemple qui n'a pas forcément d'intérêt à l'usage, mais en suivant ce principe vous pourrez totalement modifier l'affichage de votre site, selon le terminal utilisé par les internautes.
II) Les media queries :
Il s'agit de la même technique que précédemment. La seule différence réside dans le fait qu'ici vous n'avez besoin que d'un seul fichier.css. Pas besoin d'en créer un nouveau donc.
Ici, nous allons utiliser les media queries dans votre unique style.css :
/* Style.css */
p {
color: blue;
}
@media screen and (max-width: 980px)
{
p {
color: red;
}
}