CSS media queries pour les tailles d'écran

Je suis en train d'essayer de concevoir une mise en page qui sera compatible pour plusieurs tailles d'écran. Les tailles d'écran, je suis en train de concevoir sont répertoriés ci-dessous:

Tailles D'Écran:

640x480
800x600
1024x768
1280x1024 (et plus)

La chose que je vais avoir des ennuis avec la création du css3 media queries, de sorte que mes modifications de mise en page lors de la largeur de la fenêtre arrive à l'un de ces largeurs. Ci-dessous est un exemple des requêtes de média, je suis actuellement à l'aide, mais il ne fonctionne pas pour moi, alors je me demandais si quelqu'un pouvait m'aider à la réparer.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

J'ai essayé d'aller avec un nouvel ensemble de questions des médias, mais ils ne sont toujours pas de travail pour moi. Quelqu'un pourrait s'il vous plaît aider à expliquer ce que je suis dong mal. Plusieurs d'entre vous ont déjà essayé de lui expliquer, mais je ne suis pas à l'obtenir. Les nouveaux médias, les requêtes sont affichées ci-dessous:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">

Pourrait utiliser du javascript à la place?
que voulez-vous dire?
Les Media queries ne sont pas statiques. Redimensionner votre navigateur va relooker les éléments selon quelles conditions le navigateur répond désormais.
pourriez-vous être plus précis quant à ce qui ne fonctionne pas? Vous faire comprendre que d'un appareil qui 640px de large va charger tous les 4 de ces feuilles de style, non? (Parce que toutes ces expressions sont vraies: 640 <= 640, 640 <= 800, 640 <= 1024, 640 x <= 1280)
Ok, je vais essayer d'être plus précis. Dire par exemple que le navigateur largeur est de 640, puis les styles de 800, 1024, 1280 de la taille des requêtes de média ne devrait pas s'appliquer. Je pense que vous pourriez avoir résolu mon problème, cimmanon. Vous puis-je changer mon nouveau les requêtes des médias, afin qu'ils fonctionnent correctement et modifier les styles du navigateur, de la largeur des modifications à une certaine largeur.
C'est le contraire d'un design "responsive" et vous augmentez votre effort 4x, comme vous l'aurez quatre dessins à maintenir. Vous devez disposer d'un "fluide réactive" conception pour tous les le contenu, et ensuite utiliser les media queries pour faire face à certains problèmes. Par exemple, si il n'y a pas assez de place pour la barre latérale, qui n'est pas un problème spécifique au périphérique, cela signifie simplement que vous ne voulez pas que votre contenu pressé au-delà d'une certaine limite, et cette limite ne devrait pas être dicté par un appareil, il devrait plutôt être dictée par le contenu. Par défaut, le HTML est indépendante du périphérique, vous allez dans un dispositif dépendant de la direction.

InformationsquelleAutor JaPerk14 | 2012-12-12

42

Sauf si vous avez plus de feuilles de style que, vous avez foiré votre points de rupture:
```
#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)
```
La 3ème media query est probablement censé pour être min-width: 901px. Maintenant, il chevauche #1 et #2, et contrôle la mise en page en elle-même lorsque l'écran est exactement 901px de large.

Modifier pour la mise à jour question:
```
(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)
```
Les Media queries ne sont pas comme la capture ou de l'if/else. Si l'une des conditions de match, alors il va s'appliquer à tous les styles de chaque requête de média identique. Si vous ne spécifiez un min-width pour l'ensemble de vos requêtes de média, il est possible que certains ou tous les media queries sont appariés. Dans votre cas, un dispositif de 640px de large correspond à tous les 4 de vos requêtes de média, de sorte que toutes les feuilles de style sont chargés. Ce que vous êtes probablement à la recherche pour est-ce:
```
(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)
```
Maintenant il n'y a pas de chevauchement. Les styles ne s'applique que si l'appareil largeur se situe entre la largeur spécifiée.
- Vous devriez probablement refléter dans votre code dans votre réponse. Je viens d'écrire-up de l'ensemble d'une réponse et puis re-lire ce que vous avez posté et vu que tu avais répondu par commutation max pour un min.
- Merci, cela m'a vraiment aidé beaucoup.
- #3 (max-width: 901px) controles la page tout le temps parce que c'est la dernière définition et remplace toutes les déclarations des mis en avant.
- belle explication 🙂
InformationsquelleAutor cimmanon

Tout mettre dans un seul document et utiliser ceci:

/* 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 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
/*** You've spent way too much on a phone ***/
}
/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3)
and (min-resolution: 192dpi)and max-width:640px) {
background-image: url('https://i.ytimg.com/vi/zhBxfNm3rJE/maxresdefault.jpg');
}

Source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

À ce point, je serais certainement envisager d'utiliser em valeurs, plutôt que de pixels. Pour plus d'informations, consulter ce post: https://zellwk.com/blog/media-query-units/.

Alors il n'y a rien de mal avec votre suggestion, il ne répond pas à l'OP de la question.
+1 pour You've spent way to much on a phone. 🙂
Votre dernière requête doit être pour Edge 7s pas Galaxy S7s

InformationsquelleAutor Oliver Tappin

Pour tous les smartphones et les écrans de grande taille utilisent ce format de requête de média

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

InformationsquelleAutor Mohit Singh

Vous devez vous connecter pour publier un commentaire.