La requête de média min / max-width n'a pas de sens grammatical

Je suis la recherche de la notion de l' (min-width/max-width) requête des médias un peu déroutant.

Naturellement, si j'étais à la conception d'un media query j'ai envie de dire (en pseudo-code)....

if(screen.width < 420)
{
     ApplyStyle();
}

Ce concept de parler de min et max n'a pas de sens, puisque la "min-width" de quelque chose comme un élément div est une commande pas une question.

Je sais que la suite est vrai quand mon écran passe en dessous de 420px...

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


}

Je ne sais pas pourquoi, parce que la largeur maximale est quelque chose que je dis à avoir. Si j'ai dit ça pour avoir quelque chose pourquoi est-css vérification? Sûrement, il le sait déjà.

Je suis en manque peut-être la grammaire/contexte ici. Quelqu'un peut-il expliquer?

source d'informationauteur Exitos

  1. 16

    min-width dans les requêtes de média n'est pas liée à la min-width propriété vous définissez sur les éléments, ceux sont deux choses différentes.

    Dans les requêtes de média min-width: X est vrai si la fenêtre a une largeur supérieure ou égale à X, en fait, comme screen.width >= X. Évidemment max-width serait alors égal à screen.width <= X

    Pour moi, il a le sens parfait, si vous lisez @media screen and (max-width:420px) comme un écran avec une largeur maximale de 420px, donc, quelque chose de 0 à 420px

  2. 13

    Voici un exemple simple, j'espère que ça aide..

    Dire que nous avons un site web à la suite de requêtes de média:

    /* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

    Si la taille de l'écran du navigateur est 1200px, requête n ° 1 sera satisfait, le minimum de la largeur du navigateur doit être 980px de cette requête pour être affiché.

    Permet de dire que nous redimensionner le navigateur maintenant, et de faire tout le chemin vers le bas pour 250px.. requête no 4 est convaincu que le MAX est de 480px..

    Ici est une simple traduction des requêtes..

    @media (min-width: 980px) { ... }

    D'affichage si l'écran est supérieure ou égale à 980px

    @media (min-width: 768px) and (max-width: 979px) { ... }

    D'affichage si l'écran est supérieure ou égale à 768px et inférieure ou égale à 978px

    @media (max-width: 767px) { ... }

    D'affichage si l'écran est plus grand que 480px et inférieure ou égale à 767px.

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

    D'affichage si l'écran est inférieure ou égale à 480px

    À l'aide de ces questions, vous aurez toujours un résultat, une requête est toujours satisfait.

  3. 1

    La confusion, c'est qu'il est à la fois un min-width propriété CSS et des médias de la requête avec le même nom:

    @media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */