Points de rupture des requêtes multimédia CSS courantes

Question

Je suis en train de travailler sur un Réactif de Site Web avec les CSS Media Queries.

Est la suite d'une bonne organisation pour les appareils? Téléphone, Ipad (Paysage Et Portrait), ordinateur de Bureau et ordinateur Portable Grand Écran

Quelles sont les principales requêtes de médias point de rupture valeurs?

J'ai l'intention d'utiliser les points d'arrêt suivants:

• 320: Smartphone Portrait
• 481: Smartphone Paysage
• 641 ou 768 ???: IPad Portrait ???
• 961: IPad Paysage / Petit Ordinateur Portable ???
• 1025: ordinateur de Bureau et ordinateur Portable
• 1281: Écran Large

Qu'en pensez-vous? J'ai quelques doutes ??? points de.

Answer 1

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 est fluide à 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).

Answer 2

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 pour eux).

Answer 3

Je suis à l'aide de 4 points de rupture, mais comme ralph.m a dit que chaque site est unique. Vous devriez expérimenter. Il n'y a pas la magie des points de rupture due à de nombreux périphériques, écrans et résolutions.

Voici ce que j'utilise comme modèle. Je suis de vérifier le site web pour chaque point de rupture sur les différents appareils mobiles et la mise à jour de CSS pour chaque élément (ul, div, etc.) est de ne pas s'afficher correctement pour que le point de rupture.

Jusqu'à présent c'était de travailler sur plusieurs sites sensibles que j'ai fait.

/* 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) {


}    

Answer 4

Ceci est du lien css-astuces

 /* 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 */
}
 

Answer 5

Je peux vous dire que je suis juste en utilisant un seul point d'arrêt à 768 - c'est - min-width: 768px pour servir les tablettes et les ordinateurs de bureau, et max-width: 767px servir des téléphones.

Je n'ai pas regardé en arrière depuis. Il rend le développement à l'écoute facile et pas une corvée, et fournit une expérience raisonnable sur tous les appareils à un coût minime pour le développement, sans avoir à craindre un nouvel appareil Android avec une nouvelle résolution que vous n'avez pas pris en compte.