Почему один из моих медиа-запросов не работает?

У меня есть 3 таблицы стилей:Почему один из моих медиа-запросов не работает?

<link rel="stylesheet" media="(max-width: 579px)" href="css/style-small.css"> 
<link rel="stylesheet" media="(min-width: 580px) and (max-width: 799px)" href="css/style-md.css"> 
<link rel="stylesheet" href="css/style.css">

Внутри моей style.css есть запрос СМИ:

@media only screen and (min-width:965px){ 
    //css styles 
}

Все отлично работает до здесь. Но есть медиа-запрос внутри моего style-md.css файла:

@media only screen and (max-width:756px){ 
    nav.top-right{ 
     display: none; 
    } 

    blockquote{ 
     font-size: 1.35em; 
     width: 80%; 
    } 
}

И это полностью игнорируется. Я вижу код css при использовании инструментов разработчика Chrome -> Sources. Так что это не вопрос освежения. Кроме того, это не вопрос приоритета, потому что, когда я делаю «Элемент проверки» на целевых элементах, он все равно будет показывать код, только поцарапан; но он не показывает его, его просто нет.

источник

2015-04-08 Nataly

Откуда вы знаете, что это не работает? Используйте элемент проверки, чтобы пройти через эти элементы, и посмотрите, переопределяют ли другие стили ваших медиа-запросов. Попробуйте использовать! Важно. –

Я использовал несколько файлов только потому, что пытаюсь следовать «лучшим практикам», описанным на сайте разработчиков Google. [link] (https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints?hl=ru) – Nataly

Я уже это сделал. Свойства не отображаются даже при проверке. Другие стили, определенные в том же файле, но НЕ в части запросов к мультимедиа, работают очень хорошо. – Nataly

Я бы упростить, что и только один файл таблицы стилей с теми media queries внутри, используя немобильного первый метод подхода:

@media only screen { 
/*css styles*/ 
} 
@media only screen and (max-width: 964px) { 
/*css styles*/ 
} 
@media only screen and (max-width: 799px) { 
/*css styles*/ 
} 
@media only screen and (max-width: 756px) { 
/*css styles*/ 
} 

@media only screen and (max-width: 579px) { 
/*css styles*/ 
}

EDIT: (основанного на @Tony Barnes предложение), вы также можете сделать первый мобильный подход

будет примерно таким:

@media only screen { 
/*css styles*/ 
} 
@media only screen and (min-width: 579px) { 
/*css styles*/ 
} 
@media only screen and (min-width: 756px) { 
/*css styles*/ 
} 
@media only screen and (min-width: 799px) { 
/*css styles*/ 
} 

@media only screen and (min-width: 964px) { 
/*css styles*/ 
}

источник

2015-04-08 16:27:59 dippas

Почему немобильный первый метод? –

, потому что OP использует в качестве первого правила 'max-width: 579px', поэтому я старался не вмешиваться во все медиа-запросы OP, просто упрощая его. – dippas

Конечно, но вы могли бы указать OP в сторону мобильных первых медиа-запросов :) –

Я знаю, что это старо, но у меня была аналогичная проблема, и выяснилось, что в HEAD отсутствует метатег.

Добавление этого решается вопрос:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Надеется, что это поможет кому-то в будущем.

источник

2017-03-22 19:46:49 Bryan

Почему один из моих медиа-запросов не работает?

ответ

Смежные вопросы