Bienvenue dans cette dernière partie d’apprendre HTML de CSS pour débutant. Aujourd’hui, nous allons parler des sites web responsive. En bref, le responsive design des sites web qui sont adaptatifs à votre écran selon votre appareil.
Car oui, comme vous souhaitez sûrement, vous voulez que votre site web soit pour les versions ordinateurs et les versions mobiles. Donc créer des sites web avec des apparences adaptatives à tout type d’appareils est rendu une nécessité aujourd’hui.
De ce fait, nous allons aujourd’hui voir les sites web responsive de toutes les façons qui sont possibles et de la manière la plus facile pour créer des sites web avec le responsable design.
Version vidéo
Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Qu’est-ce que le responsive design ?
Le responsive design est le fait que les apparences de notre site web s’adaptent selon l’appareil et là grosseur de l’écran que nous affichons notre site web. Avec un responsable design, nous allons être capables de modifier la grosseur des éléments selon la largeur, donc dire si un écran est plus large ou plus petit qu’une certaine largeur, applique cette règle de CSS ou même nous serions capables de dire que si c’est un appareil comme une Télévision, d’appliquer une propriété CSS.
Nous serons ainsi capables de créer des sites web qui seront optimisés pour chacune des plateformes que vous souhaitez.
Les façons de faire du responsive design
Maintenant que vous savez ce qu’est le responsive design, nous allons voir comment ajouter des règles de responsive design. Il existe principalement 2 façons de faire du responsive design.
Nous pouvons directement faire un fichier externe qui dit que lorsque nous avons une certaine largeur d’écran ou un certain appareil, nous avons un fichier CSS qui est pris en charge.
Sinon, nous pouvons utiliser directement dans notre CSS une règle qui va permettre à certains types d’appareils où largeur d’écran de dire si cela est dans cette règle-là exécute cette propriété CSS
Avec un fichier externe
Vous vous souvenez, lorsque nous avons commencé à intégrer du CSS, pour relier un fichier CSS externe, nous avions la balise link.
Et donc le but ici va être de la même chose, ajouter une nouvelle balise link à notre en-tête de site web.
Et à cette balise link, comme nous l’avons vu avec le CSS, mais nous allons ajouter un attribut qui s’appelle l’attribut media.
En bref, nous allons ajouter la balise link comme pour lier du css et y ajouter l’attribut media et vous allez pouvoir y ajouter la règle des médias qui va s’appliquer si vous voulez utiliser le fichier CSS.
Je vais revenir plus tard pour les règles de média, mais si je veux par exemple que faire qu’un fichier CSS soit lu simplement pour les télévisions, voici ce que je ferais:
<link rel=”stylesheet” type=”text/css” href=”csstv.css” media=”tv” />Dans un fichier CSS
Nous pouvons utiliser la même chose, sauf directement en fichier CSS grâce à un sélecteur de propriété qui varie selon une règle. Donc nous avons le @media. Celui-ci va être utilisé directement dans les fichiers CSS de base que nous utilisons et la règle va être appliquée simplement avec ce que nous lui disons.
Souvent, lorsque nous disons appareil mobile, il est dit que c’est pour une largeur de 769 pixels ou moin. Donc si je veux appliquer une règle CSS pour les mobiles avec le @Media, voici ce que je ferais:
@media screen and (max-width: 769px){
body{
background-color: red;
}
}Ainsi pour des écrans qui sont plus petits que 769 pixels, l’arrière-plan va être en rouge.
Les règles de media
Bon, désormais, nous avons vu comment appliquer des règles de média. La vraie question que vous devez vous poser, c’est, quels sont les possibles règles que vous allez pouvoir utiliser pour appliquer certaines règles CSS?
C’est ce que je vais vous montrer dès maintenant. Il y a plusieurs façons de le faire. C’est avec des opérateurs, avec des appareils et des valeurs. Voici la liste complète:
Opérateurs
| and | Spécifie un opérateur ET. |
| NOT | Spécifie un opérateur ne contenant pas. |
| , | Spécifie un opérateur OU |
Appareils
| All | tout type d’appareils |
| En mode impression | |
| Screen | Utilisé pour les appareils avec des écrans (Ordinateur, tablette et smartphone) |
| speech | Pour les appareils de lecture du contenu |
Valeurs
| aspect-ratio | La hauteur et la largeur de la règle souhaité. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple, “min-aspect-ratio:4/2” |
| color | Les valeurs des Octets par couleur. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “color:22”. |
| color-index | Spécifie le nombre de couleur que l’appareil peux prendre. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “min-color-index: 128” |
| grid | Spécifie si le résultat est en grid ou en bitmap. Les valeurs possibles sont 0 et 1. 1 = grid et 0 = autre. Par exemple: “handheld and (bitmap:0)” |
| height | Spécifie la hauteur de l’appareil. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “screen and (max-height: 869px)” |
| monochrome | Spécifie si l’appareil utilise le monochrome. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “all and (max-monochrome:5)” |
| orientation | Spécifie si l’appareil est en mode portrait ou paysage. Les valeurs sont portrait ou landscape. Par exemple: “screen and (orientation: portrait)” |
| resolution | Spécifie si l’appareil à une certaine résolution, par densité de pixels (dpi ou dpcm). Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “print and (max-resolution:32dpcm)” |
| scan | Spécifie la méthode de scan de la télévision si elle est en progressif ou en balayage entralacé. Les valeurs possibles sont “progressive” et “interlace”. Par exemple: “tv and (scan:progressive)” |
| width | Spécifie si l’appareil à un certaine largeur, est la méthode la plus utilisée. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “screen and (max-width: 769px)” |
Et désormais vous connaissez les règles de média. Chacune d’entre elles peuvent être utilisés avec les 2 types de façon d’utiliser, soit avec l’attribut media dans la balise link ou avec la règle @Media dans le fichier CSS.
Voici comment l’utiliser avec l’attribut media:
media=”appareil OPERATEUR (valeur)”
ex:
<link rel="stylesheet" type="text/css" media=”screen and (max-width:769px)” />Voici comment l’utiliser avec la règle @Media:
@media appareil OPÉRATEUR (valeur){
}
ex:
@media all and (orientation: portrait){
}Exemple de responsive design
Vu que ce sont des notions quand même assez durs à comprendre, je vous ai concocté quelques exemples que vous pourriez retrouver avec le responsive design:
Supprimer un élément en version mobile:
@media screen and (max-width: 769px){
.monelement{
display: none;
}
}Modifier la grosseur d’une image sur PC:
@media screen and (min-width: 770px){
img{
width: 700px;
height: 200px;
}
}Modifier les marges intérieures sur mobiles:
media=”screen and (max-width:769px)”
.body{
padding: 25px;
}FAQ
Comment utiliser le responsive design ?
Tu peux utiliser le responsive design grâce à des règles de média, ces règles fonctionennt comme des conditions que tu peux utilise selon certaines règles. Tu peux voir la liste du W3C, l’organisme qui s’occupe du CSS et HTML: Les médias – W3CSchool
Pourquoi faire un site web responsive ?
Car aujourd’hui le web est mobile. Il y a désormais plus de gens qui sont sur leur téléphone pour utiliser internet que sur les ordinateurs. Alors Google en 2015 à choisir le Mobile first et classe donc les sites web selon leur version mobile! D’où l’avantage d’avoir un site web responsive et pour l’Experience utilisateur.
Ce tutoriel se trouve dans la catégorie: Programmation
