Points de rupture des requêtes multimédia CSS courantes
Je travaille sur un site Web réactif avec des requêtes de médias CSS.
Les éléments suivants sont-ils une bonne organisation pour les appareils? Téléphone, iPad (Paysage et portrait), Ordinateur de bureau et ordinateur portable, Grand écran
Quelles sont les valeurs des points d'arrêt des requêtes multimédias courantes?
Je prévois d'utiliser les points d'arrêt suivants:
- 320: Portrait sur smartphone
- 481: paysage de smartphone
- 641 ou 768 ???: Portrait sur iPad ???
- 961: Paysage pour iPad/petit ordinateur portable ???
- 1025: ordinateur de 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 mise en page particulière. Autrement dit, réduisez progressivement la fenêtre de votre navigateur et observez les points de rupture naturels de votre contenu. C'est différent pour chaque site. Tant que la conception fonctionne correctement à chaque largeur de navigateur, elle devrait fonctionner de manière assez fiable sur toutes les tailles d'écran (et il en existe de nombreuses autres).
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 d'un peu différent pour les téléphones en mode portrait (souvent, je suis obligé de changer divers éléments à leur place).
J'utilise 4 points de rupture, mais comme ralph.m a déclaré que chaque site est unique. Vous devriez expérimenter. Il n'y a pas de points d'arrêt magiques en raison de tant de périphériques, 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 met à jour les CSS pour chaque élément (ul, div, etc.) qui ne s'affiche pas correctement pour ce point d'arrêt.
Jusqu'à présent, cela fonctionnait sur plusieurs sites Web réactifs que j'ai créés.
/* 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) {
}
UPDATE
En septembre 2015, j'en utilise un meilleur. Je découvre que ces points d'arrêt pour les requêtes multimédias correspondent à de nombreux autres périphériques et résolutions d'écran.
Avoir tous les CSS pour desktop sur style.css
Toutes les requêtes de médias sur responsive.css: toutes les CSS pour les menus réactifs + points de coupure de médias
@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){ ... }
Mise à jour 2019: Conformément au commentaire de Hugo ci-dessous, j'ai supprimé max-width 1999px à cause des nouveaux écrans très larges.
Css-astuces lien
/* 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’interruption en 768, à savoir min-width: 768px pour desservir les tablettes et les ordinateurs de bureau et max-width: 767px pour prendre en charge les téléphones.
Je n'ai pas regardé en arrière depuis. Il rend le développement réactif facile et non une corvée, et offre une expérience raisonnable sur tous les appareils, à un coût minime en temps de développement, sans avoir à craindre un nouvel appareil Android avec une nouvelle résolution que vous n'avez pas encore prise en compte. .
Pensez à utiliser les points d'arrêt de Twitter bootstrap . avec un taux d'adoption aussi élevé, vous devriez être en sécurité ...
Requêtes de média pour les périphériques standard
En général, pour mobiles, tablettes, ordinateurs de bureau et 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 */
}
. 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 --- */}
Si vous accédez à Google Analytics, vous pouvez voir les résolutions d'écran utilisées par vos visiteurs sur le site Web:
Auditoire> Technologie> Navigateur & OS> Résolution de l'é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.
J'utilise toujours Desktop en premier, mobile n'a pas la priorité la plus haute, n'est-ce pas? IE <8 affichera le 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 bootstrap etc.
Au lieu d'utiliser des pixels, utilisez plutôt em ou un pourcentage, car il est plus adaptatif et fluide, il est préférable de ne pas cibler les périphériques qui ciblent votre contenu:
Vos points de rupture ont l'air vraiment bien. J'ai essayé 768px sur des tablettes Samsung et cela va au-delà. J'aime beaucoup le 961px. Vous n'avez pas nécessairement besoin de tous ces éléments si vous utilisez des techniques CSS réactives, telles que %width/max-width pour les blocs et les images (ainsi que le texte).
Gardez votre code propre et les feuilles de style séparées logiquement par configuration de type "média" d'écran ...
1) En utilisant la réponse précédente de himansu comme référence: points de rupture des requêtes multimédia CSS communes
ET
2) https://www.w3schools.com/css/css3_mediaqueries.asp
Votre réponse serait:
<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">
<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">