Points d’arrêt des requêtes médias CSS communes

Je travaille sur un site Web réactif avec des requêtes médias CSS.

Est-ce que ce qui suit est une bonne organisation pour les appareils? Téléphone, Ipad (Paysage et Portrait), bureau et ordinateur portable, grand écran

Quelles sont les valeurs de point d’arrêt des requêtes média courantes?

Je prévois d’utiliser les points d’arrêt suivants:

  • 320: Portrait de smartphone
  • 481: Paysage de smartphone
  • 641 ou 768 ???: IPad Portrait ???
  • 961: IPad Landscape / Small Laptop ???
  • 1025: Bureau et ordinateur portable
  • 1281: écran large

Qu’est-ce que tu penses? J’ai quelques doutes comme ??? points.

Plutôt que d’essayer de cibler les règles @media sur des périphériques spécifiques, il est sans doute plus pratique de les baser sur votre disposition particulière. En d’autres termes, réduisez progressivement la fenêtre de votre navigateur de bureau et observez les points d’arrêt naturels de votre contenu. C’est différent pour chaque site. Tant que la conception est bien adaptée à la largeur de chaque navigateur, elle devrait fonctionner de manière relativement fiable sur toutes les tailles d’écran (et il y en a beaucoup).

J’ai utilisé:

@media only screen and (min-width: 768px) { /* tablets and desktop */ } @media only screen and (max-width: 767px) { /* phones */ } @media only screen and (max-width: 767px) and (orientation: portrait) { /* portrait phones */ } 

Cela simplifie les choses et vous permet de faire quelque chose de différent pour les téléphones en mode portrait (la plupart du temps, je dois modifier différents éléments pour eux).

J’utilise 4 points de rupture, mais ralph.m dit que chaque site est unique. Vous devriez expérimenter. Il n’y a pas de points de rupture de magie en raison du nombre d’appareils, d’écrans et de résolutions.

Voici ce que j’utilise comme modèle. Je vérifie le site Web pour chaque point d’arrêt sur différents appareils mobiles et la mise à jour de CSS pour chaque élément (ul, div, etc.) ne s’affiche pas correctement pour ce point d’arrêt.

Jusqu’à présent, je travaillais sur plusieurs sites Web réactifs.

 /* SMARTPHONES PORTRAIT */ @media only screen and (min-width: 300px) { } /* SMARTPHONES LANDSCAPE */ @media only screen and (min-width: 480px) { } /* TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { } /* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { } 

METTRE À JOUR

En septembre 2015, j’en utilise un meilleur. Je découvre que les points de rupture de ces requêtes de médias correspondent à beaucoup plus d’appareils et de résolutions d’écran de bureau.

Avoir tout le CSS pour le bureau sur style.css

Toutes les requêtes médias sur responsive.css: toutes les CSS pour un menu responsive + points de rupture

 @media only screen and (min-width: 320px) and (max-width: 479px){ ... } @media only screen and (min-width: 480px) and (max-width: 767px){ ... } @media only screen and (min-width: 768px) and (max-width: 991px){ ... } @media only screen and (min-width: 992px) and (max-width: 1999px){ ... } 

C’est à partir du lien css-sortingcks

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Je peux vous dire que je n’utilise qu’un seul point d’arrêt à 768 – c’est-à-dire min-width: 768px pour servir les tablettes et les ordinateurs de bureau, et max-width: 767px pour servir les téléphones.

Je n’ai pas regardé en arrière depuis. Il facilite le développement réactif et ne constitue pas une corvée, et offre une expérience raisonnable sur tous les périphériques à un coût minimal pour le développement, sans avoir à craindre un nouvel appareil Android avec une nouvelle résolution que vous n’avez pas prise en compte.

Envisagez d’utiliser les points d’arrêt de twitter bootstrap . avec un taux d’adoption aussi important, vous devriez être en sécurité …

Requêtes multimédias pour les périphériques standard

En général pour les mobiles, les tablettes, les ordinateurs de bureau et les grands écrans

1. Mobiles

  /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 

2. Comprimés

 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } 

3. Ordinateurs de bureau et ordinateurs portables

 @media only screen and (min-width : 1224px) { /* Styles */ } 

4. Écrans plus grands

 @media only screen and (min-width : 1824px) { /* Styles */ } 

En détail, y compris paysage et portrait

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* Tablets, iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Tablets, iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Tablets, iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Référence

 @media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/} @media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/} @media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/} @media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/} @media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/} @media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */} 

J’utilise toujours Desktop d’abord, le mobile d’abord n’a pas la plus haute priorité le fait-il? IE <8 affichera css mobile ..

 normal css here: @media screen and (max-width: 768px) {} @media screen and (max-width: 480px) {} 

parfois des tailles personnalisées. Je n’aime pas le bootstrap etc.

Si vous accédez à votre Google Analytics, vous pouvez voir quel écran résout vos visiteurs sur le site Web:

Audience> Technologie> Navigateur et système d’exploitation> Résolution d’écran (dans le menu au-dessus des statistiques)

Mon site reçoit environ 5 000 visiteurs par mois et les dimensions utilisées pour la version gratuite de responsinator.com constituent un résumé assez précis des résolutions d’écran de mes visiteurs.

Cela pourrait vous éviter d’avoir à être trop perfectionniste.

Au lieu d’utiliser les pixels pour les utiliser ou les rendre plus adaptables et fluides, mieux vaut ne pas que les appareils cibles ciblent votre contenu:

HTML5 rockrs lu, d’abord mobile

Vos points de rupture sont vraiment bons. J’ai essayé 768px sur les tablettes Samsung et ça va au-delà, donc j’aime vraiment le 961px . Vous n’en avez pas nécessairement besoin si vous utilisez des techniques CSS réactives, telles que % width/max-width pour les blocs et les images (texte également).

Gardez votre code propre et les feuilles de style séparées logiquement par écran “media” type config …

1) Utilisation de la réponse de himansu ci-dessus comme référence
ET
2) https://www.w3schools.com/css/css3_mediaqueries.asp

votre réponse serait: