Apprendre la programmation HTML et CSS #13 Site Web CSS Responsive

html-css-13
Tu veux faire un site responsive ? Nous allons voir la création de site en reponsive avec du CSS pour le design adaptatif.

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.

Cours HTML/CSS Débutant #13 Faire des site web CSS responsiveCours HTML/CSS Débutant #13 Faire des site web CSS responsive

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

Publicité

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

andSpécifie un opérateur ET.
NOTSpécifie un opérateur ne contenant pas.
,Spécifie un opérateur OU

Appareils

Alltout type d’appareils
PrintEn mode impression
ScreenUtilisé pour les appareils avec des écrans (Ordinateur, tablette et smartphone)
speechPour les appareils de lecture du contenu

Valeurs

aspect-ratioLa 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”
colorLes valeurs des Octets par couleur. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “color:22”.
color-indexSpé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”
gridSpé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)”
heightSpécifie la hauteur de l’appareil. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “screen and (max-height: 869px)”
monochromeSpécifie si l’appareil utilise le monochrome. Les préfixes “min-” et “max-” peuvent être utilisé. Par exemple: “all and (max-monochrome:5)”
orientationSpécifie si l’appareil est en mode portrait ou paysage. Les valeurs sont portrait ou landscape. Par exemple: “screen and (orientation: portrait)”
resolutionSpé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)”
scanSpé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)”
widthSpé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)”

Publicité

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

Partager ceci

Facebook
Twitter
LinkedIn
Reddit
Pinterest
WhatsApp
Telegram

À voir également

html-css-12
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #12 Formulaires HTML
octobre 6, 2022
html-css-11
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #11 Figures, videos et audios
octobre 6, 2022
html-css-10
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #10 Tableaux HTML
octobre 6, 2022
html-css-9
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #9 Mise en page FlexBox (2/2)
octobre 6, 2022

À voir également sur le forum

Besoin d'aide ?

Malgré que tu as lu ce tutoriel, tu te poses toujours des questions à ce sujet? Le problème ne s’est pas réglé ? Vous êtes bloqué à un endroit ?

Viens poser ta question et sois répondu par la communauté Informerick rapidement!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *