Questions communes aux médias CSS points de rupture

plutôt que d'essayer de cibler les règles @media à des appareils spécifiques, il est probablement plus pratique de les baser sur votre disposition particulière à la place. C'est-à-dire, rétrécir graduellement la fenêtre de votre navigateur de bureau et observer les points de rupture naturels pour votre contenu. C'est différent pour chaque site. Aussi longtemps que la conception se déroule bien à chaque largeur de navigateur, il devrait fonctionner assez fiable sur n'importe quelle taille d'écran (et il ya beaucoup et beaucoup d'entre eux là-bas.)

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

il garde les choses relativement simple et vous permet de faire quelque chose d'un peu différent pour les téléphones en mode portrait (une grande partie du temps je me retrouve à devoir changer divers éléments pour eux).

j'utilise 4 break points mais en tant que ralph.m dit que chaque site est unique. Tu devrais expérimenter. Il n'y a pas de point de rupture magique en raison de tant 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 CSS pour chaque élément (ul, div, etc.) ne s'affiche pas correctement pour ce point de rupture.

jusqu'à présent qui travaillait sur plusieurs responsive les sites web 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) {


}    

mise à JOUR

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

ayant tous les CSS pour le bureau sur le style.css

toutes les requêtes des médias sur responsive.css: tous les CSS pour le menu responsive + médias des 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 de CSS-trucs 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 de rupture à 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 rend le développement responsive facile et pas une corvée, et offre une expérience raisonnable sur tous les appareils à un coût minime pour le temps de développement sans la nécessité de craindre un nouvel appareil Android avec une nouvelle résolution que vous n'avez pas pris en compte.

envisager d'utiliser Twitter bootstrap 's break points. avec un tel taux d'adoption vous devriez être en sécurité...

Media Queries pour les Appareils Standard

en général pour Mobile, tablettes, 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 */

    }

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 le paysage et le 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 le bureau d'abord, mobile d'abord n'a pas la plus haute priorité, n'est-ce pas? IE< 8 affichera CSS mobile..

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

parfois des tailles sur mesure. Je n'aime pas bootstrap etc.

si vous allez sur votre google analytics, vous pouvez voir quelles résolutions d'écran vos visiteurs du site utilisent:

Public > Technologie > Navigateur et OS > Résolution de l'Écran ( dans le menu ci-dessus les stats)

mon site reçoit environ 5000 visiteurs par mois et les dimensions utilisées pour la version gratuite de responsinator.com est un résumé assez précis des résolutions d'écran de mes visiteurs.

cela pourrait vous épargner d'avoir à être trop perfectionniste.

au lieu d'utiliser des pixels devrait utiliser em ou pourcentage car il est plus adaptatif et fluide, mieux ne pas cibler les dispositifs ciblent votre contenu:

HTML5 rockrs read, mobile first

vos break points semblent vraiment bons. J'ai essayé 768px sur les tablettes de 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 responsive, comme % width/max-width pour les blocs et les images (texte aussi).

Gardez votre code propre et les feuilles de style logiquement séparées par le type de configuration "media" de l'écran...





1) en utilisant la réponse d'himansu ci-dessus comme référence: Common CSS Media Queries Break Points

Et

2) https://www.w3schools.com/css/css3_mediaqueries.asp



votre la réponse devrait être:

<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">