Как отменить свойство width?
К примеру у меня есть блок и у него задан width:100%.Для этого блока есть медиа запрос на определенный размер экрана,так вот мне нужно чтобы свойство width в этом медиа запросе отменялось.Ничего не помогает, !important тоже,ему нужно именно значение.Как быть?
- Вопрос задан более трёх лет назад
- 5904 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 2
width: auto;
Ответ написан более трёх лет назад
Нравится 7 1 комментарий
Медиа-запросы
Медиа-запросы — это то, что делает возможным создание современных адаптивных веб-страниц, которые одинаково хорошо выглядят на любом экране, будь то десктоп или смартфон. Всё сводится к применению того или иного 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
Media запросы. Убрать position
Всем привет. На экране от 998пикс. стоит у header 100vh. Кнопка означающая «Скролл вниз» имеет position: absolute относительно header. Но я хочу сделать так, чтобы на экранах от 768px 100vh не было, а вместо абсолютного позиционирования кнопка имела displa: block и размещалась по центру вместе со своими margin. Чтобы не было на планшетах на полный экран один большой header. Я попробовал решить это, но иконка никак не встает по центру. Пробовал translate использовать для перемещения, но все равно не встает так как надо.
Вот код:1 2 3
a href="/" class="header-svg"> ="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">="#fff" d="M5 9.993L0 5.09v1.412l4.758 4.663.242.242.222.222.243.242.242-.242.293-.293.172-.171L11 6.483V5.071L6 9.922 6.001.13h-1z"/>/g>/g>/svg> /a>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
//SASS code .header { position: relative; height: 100vh; padding-top: 5.7rem; &-svg { display: block; position: absolute; left: 50%; bottom: 5%; transform: translate(-50%, -50%); width: 5rem; height: 5rem; padding: 2rem; border: .2rem solid #999999; border-radius: 2.5rem; svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } // MEDIA max-width 992px @include response(lg) { height: auto; padding-bottom: 8.9rem; &-svg { position: static; display: block; margin: 0 auto; margin-top: 28rem; svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } }
Современный сброс стилей CSS
В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.
В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.
Сброс разумных настроек по умолчанию
Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:
/* Указываем box sizing */
*,
*::before,
*::after box-sizing: border-box;
>
/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>
/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>
/* Выставляем основные настройки по-умолчанию для body */
body min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] list-style: none;
>
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) text-decoration-skip-ink: auto;
>
/* Упрощаем работу с изображениями */
img max-width: 100%;
display: block;
>
/* Указываем понятную периодичность в потоке данных у article*/
article > * + * margin-top: 1em;
>
/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select font: inherit;
>
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>Ну, а теперь разбираемся
Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .
*,
*::before,
*::after box-sizing: border-box;
>Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.
/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>
/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>После box-sizing , я сбрасываю margin и padding , даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.
-
или
, то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.body min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .
Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.
ul[class],
ol[class] list-style: none;
>Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .
a:not([class]) text-decoration-skip-ink: auto;
>Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.
img max-width: 100%;
display: block;
>Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.
article > * + * margin-top: 1em;
>Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.
input,
button,
textarea,
select font: inherit;
>Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important , потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.
Заключение
Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.