La page qui suit ci-dessous n’est pas une documentation officielle de la plateforme de FranceServ Hébergement. Cette ressource est une contribution de la part des hébergés eux-mêmes où ils peuvent s'ils le souhaitent, participer à la création de contenu dans le Wiki pour apporter leurs expériences concernant l'hébergement mutualisé chez FSH. Merci de prendre vos précautions. En savoir plus ...

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
contributions:responsive_design [2012/12/12 23:42]
tilde3 media queries + serveur local xampp
contributions:responsive_design [2013/11/03 04:27] (Version actuelle)
tilde3 [CSS adaptées aux divers périphériques (media queries)] nouveaux exemples
Ligne 1: Ligne 1:
 +====== Mon site adapté à (presque) tous les périphériques ======
 +
 +===== Introduction =====
 +Le PC n'est plus l'​unique support pour consulter une page web. Tablettes et smartphones sont aujourd'​hui de la partie. Or, la multitude de périphériques et configurations,​ sans compter ce que nous réserve l'​avenir,​ rend impossible la réalisation d'un site pour chaque possibilité.
 +
 +Les feuilles de style (css) forment ainsi une voie royale pour proposer facilement un bon support aux différents périphériques.
 +
 +===== CSS adaptées aux divers périphériques (media queries) =====
 +
 +[[http://​www.w3.org/​TR/​css3-mediaqueries/​|Les requêtes média]] (//media queries//) permettent de charger différentes feuilles de style en fonction du périphérique de consultation utilisé.
 +
 +Ici, imaginons une feuille de styles pour les écrans d'au moins 1024px de large, une pour les écrans de moins de 1024px, et une pour les périphériques mobiles. Enfin, ajoutons une css pour l'​impression des pages.
 +
 +=== Dans le html ===
 +On va rédiger les liens vers les différentes CSS et on les placera dans le **<​head>​** de la page html.
 +
 +Pour l'​impression,​ le média est //print//. La syntaxe est donc simplement la suivante :
 +<​HTML>​
 +<link rel="​stylesheet"​ type="​text/​css"​ media="​print"​ href="​css-print.css"​ />
 +<!-- Imprimantes -->
 +</​HTML>​
 +
 +Pour les écrans (média //​screen//​),​ on va définir à chaque fois la résolution minimale (//«Si la largeur est d'au moins (//​min-width//​) X pixels, alors OK. Sinon, passer à la CSS suivante.»//​) :
 +<​HTML>​
 +<link rel="​stylesheet"​ type="​text/​css"​ media="​screen and (min-width: 1024px)"​ href="​css-large.css"​ />
 +<!-- Écran d'au moins 1024px de large -->
 +
 +<link rel="​stylesheet"​ type="​text/​css"​ media="​screen and (max-width: 1023px)"​ href="​css-small.css"​ />
 +<!-- Écran de moins de 1024px de large -->
 +</​HTML>​
 +
 +Pour les navigateurs mobiles (tablettes, smartphones…),​ le média est //​handheld//,​ c'​est-à-dire //tenu à la main//. La syntaxe pour les tailles est la même que pour le média //screen// :
 +<​HTML>​
 +<link rel="​stylesheet"​ type="​text/​css"​ media="​handheld"​ href="​css-mobile.css"​ />
 +<!-- Tablettes, smartphones,​ etc. -->
 +</​HTML>​
 +
 +=== Dans une seule css ===
 +CSS 3 permet de regrouper toutes les variations dans une seule css. Il faut pour cela utiliser la requête **@media**.
 +
 +En reprenant l'​exemple précédant,​ cela donnerait : 
 +<​file>​
 +@media screen and (min-width: 1024px) {
 +/* Code css pour écran >1024px */
 +}
 +@media screen and (max-width: 1023px) {
 +/* Code css pour écran <1024px */
 +}
 +@media handheld {
 +/* Code css pour navigateurs mobiles */
 +}
 +@media print {
 +/* Code css pour impression */
 +}
 +</​file>​
 +
 +===== Tester vos différentes CSS en local =====
 +Comme les serveurs Franceserv Hébergement utilisent Apache, vous pouvez installer un serveur local sous Apache sur votre machine. Pour cela, Apache propose [[http://​www.apachefriends.org/​fr/​xampp.html|les kits xampp]] (Windows, Mac OS, GNU/Linux), gratuits et très simples à installer et à utiliser.
  
 
contributions/responsive_design.txt · Dernière modification: 2013/11/03 04:27 par tilde3
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki