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 ...

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)

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 :

<link rel="stylesheet" type="text/css" media="print" href="css-print.css" />
<!-- Imprimantes -->

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.») :

<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 -->

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 :

<link rel="stylesheet" type="text/css" media="handheld" href="css-mobile.css" />
<!-- Tablettes, smartphones, etc. -->

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 : 

@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 */
}

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 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