Voilà donc un article utile dans la conception de site webresponsive, et qui me sert aussi de pense bête, pour la conception de mes prochains sites.
Le coté “webresponsive” est très important sur les sites internet actuels d’autant plus quand on sait que sur les 55.4 millions d’utilisateurs internet en France (pour une population totale de 66.1 millions), 1 visite internet sur 3 ce fait depuis un smartphone et 1 visite internet sur 10 depuis une tablette.
Pour ma part, je conçois 90% des sites web en webresponsive, et je vous propose de partager un petit fichier que j’ai compilé et que j’utilise régulièrement dans ce but.
A savoir que ce fichier est le résultat de mon expérience, il n’est donc pas parfait, mais je l’ai conçu sur la base de 10 paliers (du très vieux smartphone, au pc / écran très haute résolution, en passant par les tablettes entre autre), qui jusqu’à présent m’ont donnés satisfaction dans la conception de mes différents site internet, perso et clients.
Il s’agit d’un fichier css, à inclure dans le header d’un site web, ou alors en récupérant son contenu et en le copiant collant dans le css principal du site internet.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/* Responsive adaptation by WolwX.net -- DEBUT */ /* http://www.mydevice.io/devices/ -1- tres vieux smartphones (=>2010) */ @media (min-width: 0px) and (max-width: 319px) { } /* http://www.mydevice.io/devices/ -2- vieux smartphones (=>2012) */ @media (min-width: 320px) and (max-width: 320px) { } /* http://www.mydevice.io/devices/ -3- vieux smartphones (=>2013) */ @media (min-width: 321px) and (max-width: 360px) { } /* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */ @media (min-width: 361px) and (max-width: 479px) { } /* http://www.mydevice.io/devices/ -5- common phablets et tablets */ @media (min-width: 480px) and (max-width: 767px) { } /* http://www.mydevice.io/devices/ -6- tablets et vieux PC */ @media only screen and (min-width : 768px) and (max-width: 1023px){ } /* http://www.mydevice.io/devices/ -7- tablets et vieux PC */ @media only screen and (min-width : 1024px) and (max-width: 1279px){ } /* http://www.mydevice.io/devices/ -8- vieux PC */ @media only screen and (min-width : 1280px) and (max-width: 1599px){ } /* http://www.mydevice.io/devices/ -9- PC actuels */ @media only screen and (min-width : 1600px) and (max-width: 1679px) { } /* http://www.mydevice.io/devices/ -10- pc high tech et plus */ @media only screen and (min-width : 1680px) { } /* Responsive adaptation by WolwX.net -- FIN */ |
Petit point important pour l’utilisation de ce fichier CSS, il vous suffit bien entendu de simplement rajouter votre code CSS classique dans l’intervalle de chaque palier, mais surtout, si vous ne souhaitez pas modifier le contenu de vos CSS WordPress / Prestashop ou autre thème CMS, tout en forçant le votre comme prioritaire, il vous faudra inclure “!important” en fin de ligne.
Exemple :
|
1 2 3 4 5 6 |
/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */ @media (min-width: 361px) and (max-width: 479px) { #header.logo { max-width:"350px"!important; } } |
N’hésitez pas à me faire un retour si vous constatez des paliers bizarres ou non fonctionnels, ou encore si vous avez des suggestions 🙂
pour réglages sur les multidomaines, mais aussi avec le réglage WordPress 
pour la gestion Multisite, sans oublier la mésaventure concernant ma perte du nom de domaine “wolwx.com”, le boulot de remise en place était un poil lourd, mais surtout démotivant.
en tout genre.
suffit largement plutôt qu’un CMS bien plus gros et lourd ^^’
, CSS 
, COD4 MW2 
, mais aussi de serveur Apache2 
, de serveurs vocaux 
ou de FTP 
, rdv sur ce blog prochainement 😉
Derniers commentaires