Codage avec media query
Fermé
geiffy
Messages postés
15
Date d'inscription
dimanche 29 avril 2018
Statut
Membre
Dernière intervention
4 février 2022
-
2 févr. 2022 à 16:07
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 - 4 févr. 2022 à 11:52
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 - 4 févr. 2022 à 11:52
A voir également:
- Codage avec media query
- Codage ascii - Guide
- Codage binaire - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Telecharger vlc media player - Télécharger - Lecture
- Ps3 media server - Télécharger - Divers Réseau & Wi-Fi
2 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
4 févr. 2022 à 10:28
4 févr. 2022 à 10:28
Bonjour,
Commence par écrire le code html et css pour la version mobile de ton site.
C'est souvent la version la plus simple car il y a généralement une seule colonne et juste assez de place pour aller à l'essentiel.
Une fois la version mobile intégrée, ajoute des média query pour surcharger le css de ton site afin de gérer l'affichage pour les autres résolutions, de la plus petite à la plus grande résolution.
Quelques exemples :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
Plus d'infos : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
Bonne journée,
Commence par écrire le code html et css pour la version mobile de ton site.
C'est souvent la version la plus simple car il y a généralement une seule colonne et juste assez de place pour aller à l'essentiel.
Une fois la version mobile intégrée, ajoute des média query pour surcharger le css de ton site afin de gérer l'affichage pour les autres résolutions, de la plus petite à la plus grande résolution.
Quelques exemples :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
Plus d'infos : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
Bonne journée,
geiffy
Messages postés
15
Date d'inscription
dimanche 29 avril 2018
Statut
Membre
Dernière intervention
4 février 2022
1
4 févr. 2022 à 11:52
4 févr. 2022 à 11:52
Bonjour Pitet,
Merci pour ta réponse et les infos jointes. Effectivement, cela n'est pas simple pour un néophyte. Voici ci-après ma page index. Consentirais-tu à me faire un exemple de l'écriture Html, css et media query pour la version mobile de celle-ci. Je pourrais ainsi tenter de m'en servir pour les autres pages. Quoique la page contact et de présentation de mes livres sont différentes.
Bonne journée à toi.
La page index:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Accueil</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de bienvenue du site"/>
<meta name="reply-to" content="decalielli@gmail.com">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="fichier-medias-queries.css">
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur class=”full-width-img”/>
<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site class=”full-width-img”/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<h1 style="color: #875c1a; text-shadow: 1.5px 1.5px 1.5px black">Bienvenue sur le site Atypical Autoédition</h1>
<p><img src="fichier-images/photo_color.jpg" style="margin-left:-25px" alt="ma photo"><h3><em>François de Calielli</em></h3></p>
<div id="contenu">
<p style="font-size: 20px">Il s'agit de mon site d'auteur</p>
<p>J'ai choisi de créer une marque, en l'occurrence <em><span style="color: #634009">Atypical Autoédition</em></span> pour mes livres./p>
<p>J'espère que vous poursuivrez la visite de ce site avec le désir de découvrir mes oeuvres.</p>
</div>
<div id="footer">
</div>
</body>
</html>
Merci pour ta réponse et les infos jointes. Effectivement, cela n'est pas simple pour un néophyte. Voici ci-après ma page index. Consentirais-tu à me faire un exemple de l'écriture Html, css et media query pour la version mobile de celle-ci. Je pourrais ainsi tenter de m'en servir pour les autres pages. Quoique la page contact et de présentation de mes livres sont différentes.
Bonne journée à toi.
La page index:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Accueil</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de bienvenue du site"/>
<meta name="reply-to" content="decalielli@gmail.com">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="fichier-medias-queries.css">
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur class=”full-width-img”/>
<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site class=”full-width-img”/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<h1 style="color: #875c1a; text-shadow: 1.5px 1.5px 1.5px black">Bienvenue sur le site Atypical Autoédition</h1>
<p><img src="fichier-images/photo_color.jpg" style="margin-left:-25px" alt="ma photo"><h3><em>François de Calielli</em></h3></p>
<div id="contenu">
<p style="font-size: 20px">Il s'agit de mon site d'auteur</p>
<p>J'ai choisi de créer une marque, en l'occurrence <em><span style="color: #634009">Atypical Autoédition</em></span> pour mes livres./p>
<p>J'espère que vous poursuivrez la visite de ce site avec le désir de découvrir mes oeuvres.</p>
</div>
<div id="footer">
</div>
</body>
</html>
