Différences
Ci-dessous, les différences entre deux révisions de la page.
— |
contributions:responsive_design [2013/11/03 03:27] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Mon site adapté à (presque) tous les périphériques ====== | ||
+ | |||
+ | ===== Introduction ===== | ||
+ | Le PC n'est plus l' | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | 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' | ||
+ | |||
+ | === Dans le html === | ||
+ | On va rédiger les liens vers les différentes CSS et on les placera dans le **< | ||
+ | |||
+ | Pour l' | ||
+ | < | ||
+ | <link rel=" | ||
+ | <!-- Imprimantes --> | ||
+ | </ | ||
+ | |||
+ | Pour les écrans (média // | ||
+ | < | ||
+ | <link rel=" | ||
+ | <!-- Écran d'au moins 1024px de large --> | ||
+ | |||
+ | <link rel=" | ||
+ | <!-- Écran de moins de 1024px de large --> | ||
+ | </ | ||
+ | |||
+ | Pour les navigateurs mobiles (tablettes, smartphones…), | ||
+ | < | ||
+ | <link rel=" | ||
+ | <!-- Tablettes, smartphones, | ||
+ | </ | ||
+ | |||
+ | === 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' | ||
+ | < | ||
+ | @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 [[http:// | ||