Quelles tailles d'écrans pour du responsive ?

ortolojf

WRInaute accro
Bonjour

Je suis entrain de rendre mon site "responsive", en m'aidant d'un template css de Alsacréations, et j'ai l'intention de mettre des classes suivant les tailles d'écrans.

Quelles pourraient être les limites, pour ces catégories :

smartphones, tablettes, portables, desktop ancien, desktop gros écrans.

Et, sans oublier les montres connectées et autres lunettes. ;)

Le template donne à peu près ces limites :

Code:
/* ---------------------------------- */
/* ==Responsive very large            */
/* ---------------------------------- */
@media (min-width: 1280px) {

}

/* ---------------------------------- */
/* ==Responsive large                 */
/* ---------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {


}

/* ---------------------------------- */
/* ==Responsive medium                */
/* ---------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {


}

/* ---------------------------------- */
/* ==Responsive small                 */
/* ---------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {

}

/* ---------------------------------- */
/* ==Responsive tiny                  */
/* ---------------------------------- */
@media (max-width: 480px) {


}


Le problème, est évidemment que seul compte la taille des écrans, puisque je n'utilise pas Java.

Ce type de limites semble-t-il acceptable ?

Merci beaucoup de vos réponses.

Respectueusement.
 

loubet

WRInaute impliqué
en utilisant l'outil de chrome, tu as les résolutions des principaaux smartphones et tablettes, donc tu peux vérifier la pertinence des chiffres.
 

ortolojf

WRInaute accro
loubet a dit:
en utilisant l'outil de chrome, tu as les résolutions des principaaux smartphones et tablettes, donc tu peux vérifier la pertinence des chiffres.


Bonjour Monsieur

Quel outil de Chrome ?

J'avais effectivement un tel outil il y a environ 6 mois, mais je ne sais plus comment cet outil est utilisé.

Respectueusement.
 

ortolojf

WRInaute accro
Bonjour Monsieur

J'ai trouvé sur Alsacréations.

<F12> puis <Echap>.

Je vous prie de m'excuser pour ma question stupide.

Respectueusement.
 

ortolojf

WRInaute accro
Bonjour loubet

Voilà ce que çà donne :

Code:
------------------------------------------------
        Type clients    |   jusqu'à  L
------------------------|-----------------------
        Smartphones     |      420
------------------------------------------------
        Tablettes       |      970
------------------------------------------------
   Mobiles et Tablettes |     1024
------------------------------------------------
   Mobiles et Desktop   |     1280
------------------------------------------------
    Laptop et Desktop   |       +
------------------------------------------------


------------------------------------------------
        Type clients    |       LxH
------------------------|-----------------------
  Samsung Galaxy S4     |     360x640
------------------------|-----------------------
  Samsung Galaxy SIII   |     360x640
------------------------|-----------------------
  Samsung Note 3        |     360x640
------------------------|-----------------------
       Nokia N9         |     360x640
------------------------|-----------------------
  Nokia Lumia 520       |     320x533
------------------------|-----------------------
  Laptop with touch     |    1280x650
------------------------|-----------------------
Laptop with MDPI screen |    1280x650
------------------------|-----------------------
Laptop with HDPI screen |    1440x900
------------------------|-----------------------
  LG Optimus L70        |     384x640
------------------------|-----------------------
  Google Nexus 7        |     960x600
------------------------|-----------------------
  Google Nexus 5        |     360x640
------------------------|-----------------------
  Google Nexus 4        |     384x640
------------------------|-----------------------
  Google Nexus 10       |    1280x800
------------------------|-----------------------
  BlackBerry Z30        |     360x640
------------------------|-----------------------
  BlackBerry PlayBook   |    1024x600
------------------------|-----------------------
  Apple IPhone 6 Plus   |     414x736
------------------------|-----------------------
  Apple IPhone 6        |     375x667
------------------------|-----------------------
  Apple IPhone 5        |     320x568
------------------------|-----------------------
  Apple IPhone 4        |     320x480
------------------------|-----------------------
  Apple IPad Mini       |    1024x768
------------------------|-----------------------
  Apple IPad            |    1024x768
------------------------|-----------------------
 Amazon Kindle Fire HDX |    2560x768
------------------------------------------------


Respectueusement.
 

ortolojf

WRInaute accro
ybet a dit:
420... et 240 pour les plus petits (attention 240 X 310).


Bonjour ybet ;)

Alsacréations donnait comme limite : 480.

Merci beaucoup de ta réponse.

Voici le résultat des limites :

Code:
 *  --  240  --  480  --  970  --  1024  --  1280  --  *


Très amicalement et respectueusement.
 

Discussions similaires

Haut