Медиа-запросы - между двумя ширинами

Question 1

Я пытаюсь использовать медиа-запросы CSS3, чтобы создать класс, который появляется только тогда, когда ширина больше 400 пикселей и меньше 900 пикселей. Я знаю, что это, вероятно, очень просто, и мне не хватает чего-то очевидного, но я не могу этого понять. Я придумал приведенный ниже код, благодарю за любую помощь.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

Question 2

Вам нужно поменять свои значения:

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}

Демо: http://jsfiddle.net/xf6gA/ (используется цвет фона, чтобы было легче подтвердить)

Question 3

@Jonathan Sampson, я думаю, ваше решение неверно, если вы используете несколько @media .

Вы должны использовать ( сначала минимальную ширину ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

Question 4

просто хотел оставить .scssздесь свой пример, я думаю, что это своего рода лучшая практика, особенно я думаю, что если вы делаете настройку, неплохо установить ширину только один раз! Применять его везде не умно, вы увеличите человеческий фактор в геометрической прогрессии.

Жду ваших отзывов!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}

Question 5

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}

Развернуть фрагмент

Answer 1

Я пытаюсь использовать медиа-запросы CSS3, чтобы создать класс, который появляется только тогда, когда ширина больше 400 пикселей и меньше 900 пикселей. Я знаю, что это, вероятно, очень просто, и мне не хватает чего-то очевидного, но я не могу этого понять. Я придумал приведенный ниже код, благодарю за любую помощь.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

Answer 2

280

Вам нужно поменять свои значения:

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}

Демо: http://jsfiddle.net/xf6gA/ (используется цвет фона, чтобы было легче подтвердить)

Sampson
источник

4

max-widthи min-widthдолжно быть отменено. этот способ более

читабелен

Answer 3

4

max-widthи min-widthдолжно быть отменено. этот способ более

читабелен

Answer 4

34

@Jonathan Sampson, я думаю, ваше решение неверно, если вы используете несколько @media .

Вы должны использовать ( сначала минимальную ширину ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

WalkerNuss
источник

10

Принятый ответ ни в коем случае не является неправильным, но я думаю, что использование min-width в max-width является более четким и читаемым соглашением.

Дэйв Пауэрс

1

Согласен с @DavePowers. В моем случае мой медиа-запрос был отформатирован как @WalkerNuss, но я забыл первый andпосле @media screen. Вставка первого andисправила это для меня.

Кайл Васселла

Answer 5

10