Voici une procédure simple pour concevoir et tester des feuilles de styles adaptées à différents types de médias.
NOTA : Merci d'avance de corriger et de témoigner de vos techniques !
[h]A. Définir les cibles de vos css.[/h]
Ici, imaginons une feuille de styles pour les PC portables et de bureau (à partir d'une résolution de 1024 px de large), une pour les tablettes (à partir de 768 px), et une pour les smartphones (à partir de 320 px). Enfin, ajoutons une css pour l'impression des pages.
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 :
Code : Tout sélectionner
<link rel="stylesheet" type="text/css" media="print" href="css-print.css" />
Code : Tout sélectionner
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="css-pc.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="css-tab.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="css-smart.css" />
L'idéal, c'est d'utiliser un serveur en local (le fameux http://localhost).
NOTA: la technique suivante fonctionne pour les pages HTML. Je ne sais pas le faire avec PHP.
Sous GNU/Linux, c'est extrêmement simple à réaliser avec Python. Dans une console, exécutez :
Code : Tout sélectionner
python -m "SimpleHTTPServer"
Pour simuler une impression, rien de plus simple : faites un "Aperçu avant impression" ou imprimez la page dans un pdf.
Pour tester différents médias génériques, vous pouvez utiliser l'outil Responsive Design de Victor Coulon.
- Glissez «RWD bookmarklet» dans votre menu de marque-pages.
- Chargez votre page et lancez le marque-pages «RWD bookmarklet».
- Testez les différents rendus, et corrigez en conséquence.
