Le responsive design
En CSS le resposive design est le fait de créer un design adapté au support. Il ne s'agit pas seulement d'esthétisme mais aussi offrir une meilleur expérience utilisateur à l'internaute en augmentant l'ergonomie de votre site web.
La methode la plus basique de responsive design est d'afficher ou de cacher un élément en fonction de la largeur et de la hauteur du support. Il est donc possible de créer deux menus et afficher le petit menu sur les écrans de faible résolution. Le problème de cette pratique c'est qu'on créer deux fois la même ressource. Il est donc plus judicieux de changer les propriétés d'un élément en fonction de la taille de l'écran.
Exemple:
| <style> | |
| #menu{ width:350px; } | |
| @media (min-width: 500px) { | |
| #menu{ width:450px; } | |
| } | |
| @media (min-width: 1000px) { | |
| #menu{ width:800px; } | |
| } | |
| </style> |
Résolution iphone
Rendu de ce site sur un smartphone
UNE QUESTION SUR L'ARTICLE?
Initiation
Un site web c'est quoi?Dév. back-end / front-endQue dois-je maîtriser ?Design /ergonomie webNavigateur ChromeL'éditeur de texteInstaller serveur webPhotofiltreOVH HébergementFTP et filezillaDictionnaire informatiqueHTML
CSS
PHP
PHP Avancé
Bootstrap
javascript / jQuery
MySQL
Symfony 2
Prestashop
Optimiser
CSSW