Можно ли отменить предыдущее значение css?
В данном контексте — да, надо перезаписывать width. Например, width: unset/initial.
Либо строить иначе CSS, чтобы не было иерархического наследования свойств.
Решения вопроса 2
Антон Усачев @rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Не уверен на 100%, но кажется, что значение initial может помочь.
@media screen and (max-width: 600px) < div < width: initial; >>Ответ написан более трёх лет назад
initial поставит 100%
Надо понять зачем нужно
/* в другом файле */ div
И либо убрать это, либо завернуть в другой медиа запрос.
Ответ написан более трёх лет назад
Северное Сияние @php666 Автор вопроса
Надо понять зачем нужно
Грубо говоря, на одной странице два блока с элементами имеют одну структуру, но разные css.
По умолчанию, все элементы горизонтальные.
Для одного из блоков дописываем класс и элементы блока становятся вертикальными.
Но на media нужно вернуть вертикальным элементам горизонтальный вид.
Северное Сияние, без кода не понятно. Я бы яввно укакзал значение.
Как вариант обернуть эти блоки в какой-то контейнер, задать ширину этому контейнеру, тогда сработает unset.
Как отменить внутренние отступы при медиа запросе
Специфичность селектора инпута выше у кода над медиазапросом. Медиазапрос не повышает «силу перебивания» свойств, это нужно делать самостоятельно:
.page9 < min-height: 469px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >.page9 .page9-logo < padding-top: 109px; >.page9 .page9-logo > img < max-width: 94px; max-height: 85px; >.page9 .page9-title < padding-bottom: 39px; padding-bottom: 35px; >.page9 .page9-form < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; >.page9 .page9-form > input[type=text] < border: 1px solid #d3d7d9; max-width: 400px; max-height: 69px; padding: 28px 228px 24px 28px; margin-right: 8px; >.page9 .page9-form > input[type=submit] < max-width: 126px; max-height: 69px; padding: 26px 45px 26px 45px; >@media (max-width: 220px) < .page9 .page9-title >p < word-break: break-all; >.page9 .page9-form > input[type=text] < /* >Stay on the saddle!
Если нужно и для кнопки, то можно писать например input[type] или как-то иначе усилить при сохранении универсальности.
Медиазапросы — CSS: Адаптивность сайта
Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств.
Медиазапросы записываются следующим образом:
В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:
Ориентация экрана
Для определения ориентации экрана используется ключ orientation , значением которого может выступать одно из двух значений:
- landscape . Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
- portrait . Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.
@media (orientation: landscape) /* При горизонтальной ориентации фоновым цветом сайта будет белый */ body background: #FFF; > > @media (orientation: portrait) /* При вертикальной ориентации фоновым цветом сайта будет чёрный */ body background: #000; > >Разрешение экрана
При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.
С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.
/* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */ @media (max-width: 1400px) /* Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */ > @media (max-width: 990px) /* Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */ > @media (max-width: 770px) /* Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей. Это множество мобильных устройств */ >Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиазапросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиазапроса.
Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:
- Стили по умолчанию.
- Стили для условия медиазапроса max-width: 1400px .
- Стили для условия медиазапроса max-width: 990px .
- Стили для условия медиазапроса max-width: 770px .
Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.
В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.
Стили, написанные с использованием подхода Mobile First выглядят следующим образом:
/* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */ @media (min-width: 770px) /* Стили для устройств, у которых ширина viewport больше или равно 770 пикселей */ > @media (min-width: 990px) /* Стили для устройств, у которых ширина viewport больше или равно 990 пикселей, но меньше 1400 пикселей. */ > @media (min-width: 1400px) /* Стили для устройств, у которых ширина viewport больше или равно 1400 пикселей */ >Логические операторы
Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:
- Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and . Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:
@media (orientation: portrait) and (min-width: 600px) .container /* Для устройств с портретной ориентацией И шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >
- Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:
@media (orientation: portrait), (min-width: 600px) .container /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >
- Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not . Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not .
@media not all and (orientation: landscape) .container /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >Использование медиазапросов при подключении CSS
Медиазапросы возможно писать не только внутри CSS-файла, но и использовать их в HTML при подключении файла стилей. В этом случае медиазапрос указывается в атрибуте media .
lang=«ru»> charset=«UTF-8»> name=«viewport» content=«width=device-width, initial-scale=1.0»> Подключение CSS файлов rel=«stylesheet» href=«style.css»> rel=«stylesheet» media=«screen and (min-width: 750px)» href=«style750px.css»>
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Медиа-запросы
Медиа-запросы — это то, что делает возможным создание современных адаптивных веб-страниц, которые одинаково хорошо выглядят на любом экране, будь то десктоп или смартфон. Всё сводится к применению того или иного CSS-правила, в зависимости от размера окна браузера (области просмотра, вьюпорта), настроек браузера или возможностей устройства.
Алгоритм применения стилей следующий:
- Разработчик описывает набор медиа-запросов и CSS-правил внутри них.
- Браузер отслеживает изменение размера вьюпорта.
- Браузер применяет CSS-правила из медиа-запросов подходящих под текущий размер вьюпорта.
То есть медиа-запросы это инструкции вида: «когда страницу открыли на десктопе, я хочу, чтобы цвет текста был красным, а при открытии на телефоне — зелёным».
Синтаксис
@media media-type and (media-feature) /* * Набор CSS-правил, которые нужно применить к документу, * если условие проверки медиатипа и выражения истинно */ >Медиа-запрос это специальная CSS-конструкция, объявляемая директивой @media , за которой может следовать тип устройства (media-type) и медиа-функции (media-feature) — выражения проверяющие характеристики устройства (например ширину вьюпорта). Медиа-функция это логическое выражение, которое возвращает истину (верно) или ложь (не верно).
Например, если необходимо сделать фон оранжевым при ширине вьюпорта 900px и шире, необходимо записать следующий медиа-запрос.
@media screen and (min-width: 900px) body background-color: orange; > >Человеческим языком это можно прочитать как: «если страница отображается на экране, ширина которого не менее 900 пикселей, необходимо применить указанное CSS-правило».
Перейдите на страницу примера кликнув в верхнем правом углу редактора по Edit on Codepen и изменяйте ширину области с результатом. Цвет фона будет изменяться в зависимости от ширины вьюпорта, укзанной в медиа-запросах.
Условие проверки может быть настолько сложным или простым, насколько этого требует ситуация. В большинстве случаев достаточно указать медиа-тип устройства (чаще всего screen ), и проверить только ширину вьюпорта.
/* Этот медиа-запрос применится во время печати документа. */ @media print /* . */ > /* Это медиа-запрос применится при ширине вьюпорта более 400px. */ @media screen and (min-width: 400px) /* . */ > /* Тип screen можно не указывать, если стили пишутся только для экранов. */ @media (min-width: 400px) /* . */ >Медиа-типы
Медиа-тип используется для описания типа устройств на которых может отображаться веб-страница. Всего есть три типа которые поддерживаются всеми современными браузерами.
- all — если не указать тип носителя, по умолчанию будет использовано это значение, которое означает любое устройство.
- print — соответствует принтерам и устройствам, предназначенным для воспроизведения печатного варианта, например веб-браузеру, отображающему документ в режиме «Предварительный просмотр».
- screen — описывает устройства с физическим экраном: смартфоны, планшеты, мониторы, телевизоры и т. д. То есть всё, что не охватывает тип print .
Медиа-функции
Две наиболее часто используемые медиа-функции, которые позволяют определять ширину вьюпорта браузера — min-width и max-width . Указывается минимальная (min-width) или максимальная (max-width) допустимые ширины вьюпорта, при которых применяются правила из медиа-запросов.
/* Применится когда ширина вьюпорта больше чем 900px */ @media (min-width: 900px) body background-color: green; > > /* Применится когда ширина вьюпорта меньше чем 600px */ @media (max-width: 600px) body background-color: yellow; > >Если представить ширину вьюпорта как прямую от 0 до бесконечности, то мы описываем промежуток, на котором необходимо применить какие-то стили.
Размер вьюпорта, при котором вся вёрстка или её отдельные части изменяют свои стили, то есть меняется дизайн называется точкой перелома (breakpoint).
При изменении ширины вьюпорта в примере, до 600px фон будет желтого цвета, а после 900px — зелёного. В промежутке от 601px до 899px — цвет белый, значение указанное по умолчанию, потому что ни один медиа-запрос не подойдёт.
А как описать промежуток, например, от 600px до 900px ? Необходимо использовать логические операторы для составных медиа-функций.
Логические операторы
Медиа-тип и медиа-функции могут быть разделены необязательными логическими операторами not , and и only — значение по умолчанию. Полный синтаксис медиа-запроса выглядит следующим образом.
@media only|not media-type only|and|not (media-feature) /* Набор CSS-правил, которые нужно применить к документу, если условие проверки медиатипа и выражения истинно */ >Оператор and
Оператор and (буквально «И») используется не только между типом носителя и медиа-условием, но и для связывания нескольких медиа-функций с проверками значений.
@media screen and (min-width: 400px) and (max-width: 800px) body background-color: red; > >Такой медиа-запрос выполнится только если веб-страница открыта на экране, а ширина вьюпорта находится в диапазоне от 400px до 800px .
Оператор ,
Оператор , (буквально «ИЛИ») позволяет указать набор выражений, при выполнении хотябы одного из которых, выполнится медиа-запрос.
Например, необходимо применить стили в промежутке до 600px или после 900px .
@media (max-width: 600px), (min-width: 900px) body background-color: orange; > >
То есть это просто перечисление набора медиа-запросов при которых должны примениться стили. Это можно записать как два разных медиа-запроса. Но тогда код стилей будет дублироваться.
@media (max-width: 600px) body background-color: orange; > > @media (min-width: 900px) body background-color: orange; > >В будущих редакциях CSS, оператор , будет заменён на оператор or .
Оператор not
Оператор not (буквально «НЕ») позволяет сделать отрицание, то есть отменить медиа-запрос. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком. Используется очень редко, в каких-то специфических случаях.
Например, запишем условие при котором стили должны примениться везде кроме печати.
@media not print /* . */ >При использовании оператора not обязательно должен быть указан тип носителя, потому что по умолчанию для него будет установлено значение all и выражение not all будет читаться буквально как «не все», и медиа-запрос не выполнится никогда.
/* Никогда не выполнится */ @media not (max-width: 500px) /* . */ > /* Выполнится если ширина будет больше 500px. */ @media not screen and (max-width: 500px) body background-color: tomato; > > /* В таком случае, для простоты чтения кода, лучше использовать min-width: 500px. */ @media (min-width: 500px) body background-color: tomato; > >Переопределение стилей
Ничто не мешает браузеру применить более одного медиа-запроса одновременно, если они подходят по условию. Медиа-запросы не добавляют специфичности к селекторам которые они содержат, но порядок правил по-прежнему имеет значение. То есть правила находящиеся в медиа-запросах участвуют в стандартном каскадировании при составлении финальных стилей элемента.
/* Базовый стиль */ body background-color: #fff; > /* При 900px и шире переопределяем фон */ @media screen and (min-width: 900px) body background-color: #388e3c; > >В инструментах разработчика можно наглядно посмотреть как применяются CSS-правила и переопределяется цвет фона элемента .
При этом переопределяются только одинаковые свойства, а не всё правило целиком. Благодаря этому можно делать слоёный пирог из стилей, не дублируя предыдущие, которые подходят и для текущего медиа-запроса.
Так в инструментах разработчика будут выглядеть стили элемента при ширине вьюпорта больше чем 900px .
- Синтаксис
- Медиа-типы
- Медиа-функции
- Логические операторы
- Оператор and
- Оператор ,
- Оператор not
