Я намагаюся використовувати медіа-запити CSS3, щоб створити клас, який з’являється лише тоді, коли ширина перевищує 400 пікселів і менше 900 пікселів. Я знаю, що це, мабуть, надзвичайно просто, і я пропускаю щось очевидне, але не можу це зрозуміти. Що я придумав - це нижченаведений код, будь-яка допомога.
@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}Відповіді:
Вам потрібно переключити свої значення:
/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}Демонстрація: http://jsfiddle.net/xf6gA/ (використовуючи колір фону, тому простіше підтвердити)
@ Джонатан Сампсон, я думаю, що ваше рішення неправильне, якщо ви використовуєте кілька @media .
Вам слід скористатися ( спочатку мінімальна ширина ):
@media screen and (min-width:400px) and (max-width:900px){
...
}andпісля цього забув @media screen. Вставлення першого andзафіксованого для мене.
я просто хотів залишити свій .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;
}
}.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}
max-widthіmin-widthповинні бути перевернуті. цей спосіб більш читабельний