• Blog
  • Portfolio
  • A propos de moi
  • Créations Websites
  • Blog
  • Portfolio
  • A propos de moi
  • Créations Websites
Informatique
Browse:
  • Home
  • Informatique
  • 10 paliers .css pour conception site web webresponsive

10 paliers .css pour conception site web webresponsive

by WolwX in Informatique, Webmastering
Tags: cms, css, internet, pc, Prestashop, résolution, responsive, smartphone, tablet, tablette, visite, webmaster, wordpress

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.

webresponsive

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 🙂

Articles similaires

WolwXPost author

Cliquez ici pour annuler la réponse.

Laisser un commentaire Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

XHTML: You can use these tags <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Rechercher

Mots Clés

6 pouces administration système android Android 4.4.4 apache2 APK application astuce Blizzard bug cms compilation counter strike source css debian DPI dédié facebook fps gamer geek Huawei Ascend Mate 7 jeux vidéo KitKat linux mail maj mumble mumble 1.1.8 mutualisé obb ovh script serveur serveur dédié smartphone ssh sécurité tablette teamspeak téléchargement videos virus WolwX.net wordpress

Derniers commentaires

  • Damien dans Achat smartphone chinois, guide pour être bien préparé à l’aventure ! Tout ce qu’il faut savoir sur les douanes, taxes, et autre questions
  • Admin Sys – Bloquer les connexions par pays, IpTables avec GeoIP | WolwX.net dans Changer de kernel – Serveur OVH (SoYouStart / Kimsufi)
  • Abeilleau dans Retour d’expérience sur mon premier test de FirstHeberg.com
  • One dans MAJ 29/01/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 770405)
  • AwK dans MAJ 29/01/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 770405)
  • WolwX dans MAJ 29/01/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 770405)
  • David dans MAJ 29/01/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 770405)
  • WolwX dans MAJ 01/04/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 832806)
  • AzaWoodyy dans MAJ 01/04/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 832806)
  • ShiroiHebi dans MAJ 01/04/15 Hearthstone compatible et fonctionnel sur smartphone android inférieur à 6 pouces (méthode ultra simple) (rev 832806)
Linkedin Facebook
Twitter Youtube
Contact Mail
Plan du site (Sitemap) :
  • Blog Articles
  • Portfolio Portfolio
  • Créations Websites Créations Websites
  • A propos de moi A propos de moi
  • A propos de moi Me contacter

WolwX :: © 2009 - 2018 Tous droits réservés. +
Propulsé par Wordpress :: Designed (OneTouch v2 custom) :: Hosted, Configured & Powered by n1-Web.fr
Optimisé en HD pour une résolution égale ou supérieur à 1280x1024 pixels
Compatible Smartphones et Tablets, Responsive Webresponsive 10 paliers.
Navigateurs recommandés Google Chrome Firefox

Avertissement : Toute reproduction, représentation, traduction, adaptation, ou citation qu'elle soit intégrale ou partielle, quelqu'en soit le procédé, est strictement interdite sans autorisation, sauf cas prévus par l'article L.112-5 du code de la propriété intellectuelle.
Les marques citées sont la propriété de leurs détenteurs respectif.