Медиа запрос не переписывает ранее заданный стиль?
Подскажите пожалуйста, в чем может быть проблема следующего характера?
Медиа запросы не переписывают стили элементов с определенного контейнера. В отладчике, стили медиа запросов стоят ниже установленных изначально и перечеркиваются, следовательно не применяются. У других контейнеров данной проблемы нет.
При верстке использую SASS, для теста перенес проблемный кусок кода в чистый файл css и все заработало.
- Вопрос задан более трёх лет назад
- 1080 просмотров
Комментировать
Решения вопроса 1
Рецепты https://codepen.io/jrkdv/full/LKLXdq
в медиа запросах не хватает родительских селекторов
.articles .article .article_text
против медиа правила:
.article_text
Простыми словами: чем больше селекторов используется в выборке, тем выше приоритет
Ответ написан более трёх лет назад
Нравится 3 1 комментарий
talaxasi @talaxasi Автор вопроса
Благодарю за ответ!
Пока учусь, по незнанию кажется что присутствует какая-то мистика или код недружелюбно настроен))
Медиазапросы и другие устройства — CSS: Адаптивность сайта
Медиазапросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.
В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиазапроса:
- all — все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.
- print — принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.
- screen — все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.
- speech — скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.
/* Стили сайта */ @media print /* Стили для вывода страницы на печать */ > @media speech /* Стили для скринридеров */ >
Так же, как и с остальными медиазапросами, тип устройства можно указывать при подключении CSS-файла:
lang="ru"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> Подключение CSS-файлов rel="stylesheet" href="style.css"> rel="stylesheet" media="print" href="print.css">
Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:
- color . Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.
- monochrome . Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета — чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.
- orientation . Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.
- aspect-ratio . Характеристика, показывающая соотношение сторон viewport. Например 16/9 или 4/3. Если разрешение viewport равняется 1280×720, то aspect-ratio может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать 16/9, 32/18, 1280/720 и даже 2560/1440.
/* Стили сайта */ @media (color) /* Стили для цветных устройств */ > @media (aspect-ratio: 16/9) /* Стили страницы с соотношением 16 к 9 */
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Использование свойства pointer-events с медиа-запросами
Все мы знаем, что медиа-запросы позволяют нам управлять положением элементов, мы даже можем анимировать изменение значений свойств при выполнении условий медиа-запросов. Чуть менее стандартное применение медиа-запросов — это использование их вместе со свойством pointer-events. Используя CSS- свойство pointer-events , мы можем изменять функциональность приложения, основываясь на выполнении условий медиа-запроса.
Пример можно увидеть в текущем варианте MDN. Слева вы видите содержимое статьи, справа вы видите оглавление:
При выполнении условий медиа-запроса для планшетов оглавление должно переместиться вверх и оказаться над статьей:
В браузерах настольных компьютеров при клике на заголовке оглавления ничего происходить не должно. На планшете или другом мобильном устройстве оглавление должно сворачиваться вверх при клике на заголовке, чтобы освободить критически важное место и предотвратить (по возможности) необходимость постоянной прокрутки статьи. Мне не хотелось использовать JavaScript для включения и отключения этого функционала, потому что… ну… это было бы неэффективным решением. Вместо этого я включил свойство pointer-events в медиа-запрос для планшетов:
/* по умолчанию обработка событий отключена */ #toc .heading < pointer-events: none; > #toc i < display: none; > /* включаем этот функционал для планшетов! */ @media only screen and (max-width: 760px) < #toc .heading < pointer-events: auto; > #toc i < display: block; > > Я просто обожаю свойство pointer-events , потому что кроме всего прочего оно предотвращает срабатывание события клика, поэтому фрагмент JavaScript-кода, который я использовал для сворачивания и разворачивания, не выполняется. Я бы не сказал, что я сделал что-то заумное, я просто хочу показать, что с помощью медиа-запросов вы можете менять не только расположение элементов. Ну и, конечно, то, что pointer-events — это очень круто!
Использование медиавыражений
Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.
Медиа для разных типов устройств
Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
@media print . >
Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:
@media screen, print . >
Список устройств вы можете найти перейдя по этой ссылке (en-US) . Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.
Узконаправленные @media
Media features (en-US) описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:
@media (hover: hover) . >
Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:
@media (max-width: 12450px) . >
Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
@media (color) . >
Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:
@media speech and (aspect-ratio: 11/5) . >
Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.
Создание комплексных медиавыражений
Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются логические операторы: not , and , and only . Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.
Примечание: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
and
The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
@media (min-width: 30em) and (orientation: landscape) . >
To limit the styles to devices with a screen, you can chain the media features to the screen media type:
@media screen and (min-width: 30em) and (orientation: landscape) . >
comma-separated lists
You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:
@media (min-height: 680px), screen and (orientation: portrait) . >
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.
not
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
@media not all and (monochrome) . >
. so that the above query is evaluated like this:
@media not (all and (monochrome)) . >
. rather than like this:
@media (not all) and (monochrome) . >
As another example, the following media query:
@media not screen and (color), print and (color) . >
. is evaluated like this:
@media (not (screen and (color))), print and (color) . >
only
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
Смотрите также
- Media types (en-US)
- Media features (en-US)
- Testing media queries using code (en-US)
- CSS Animations Between Media Queries
- Extended Mozilla media features (en-US)
- Extended WebKit media features (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.