Media query variable css

CSS3 Переменные в медиа-запросах

Теперь мы хотим изменить значение переменной внутри медиа-запроса.

Совет: Медиа-запросы — это определение разных правил стиля для разных устройств (экранов, планшетов, мобильных телефонов и т.д.). Вы можете узнать больше о медиа-запросах в главе Медиа-запросы.

Здесь мы сначала объявляем новую локальную переменную с именем —fontsize для класса .container . Мы устанавливаем его значение в 25 пикселей. Затем мы используем его в классе .container дальше вниз. Затем мы создаем правило @media , которое гласит: «Когда ширина браузера 450px или шире, измените значение переменной —fontsize класса .container на 50px».

Пример

/* Объявления переменных */
:root —blue: #1e90ff;
—white: #ffffff;
>

/* Стили */
body background-color: var(—blue);
>

h2 border-bottom: 2px solid var(—blue);
>

.container color: var(—blue);
background-color: var(—white);
padding: 15px;
font-size: var(—fontsize);
>

@media screen and (min-width: 450px) .container —fontsize: 50px;
>
>

Вот еще один пример, где также меняем значение переменной —blue в правиле @media :

Пример

/* Объявления переменных */
:root —blue: #1e90ff;
—white: #ffffff;
>

/* Стили */
body background-color: var(—blue);
>

h2 border-bottom: 2px solid var(—blue);
>

.container color: var(—blue);
background-color: var(—white);
padding: 15px;
font-size: var(—fontsize);
>

@media screen and (min-width: 450px) .container —fontsize: 50px;
>
:root —blue: lightblue;
>
>

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает функцию var() function.

CSS Функция var()

Источник

CSS-переменные в медиазапросах

Поскольку я являюсь новичком в разработке, мне достаточно трудно считывать используемую в препроцессорах вложенность свойств с помощью символа «&» . Вместо формул и миксинов я предпочитаю писать обычные правила. А вместо SASS-переменных использую кастомные свойства CSS. Единственной причиной, по которой я продолжал использовать SASS, была возможность подставлять в медиазапросы переменные с контрольными точками смены раскладки страницы. Например, $tablet: 768px или $dektop: 1100px .

Именно по этой причине для меня было большой радостью узнать о существовании PostCSS-плагина «PostCSS Custom Media», который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации «Media Queries Level 5», преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.

Кроме базового описания на основной странице плагина, в отдельном документе присутствуют примеры его использования как с помощью интрументов Gulp, Webpack и других, так и в самом NodeJS.

Выдержка из спецификации

При создании документов, в которых применяются медиазапросы, нередко одни и те же выражения многократно указываются в разных местах. Например, для задания нескольких операторов @import . Повторение медиазапросов может быть рискованным. Если понадобится изменить контрольную точку, разработчику придётся изменять значения во всех встречающихся случаях. Если же изменение нужно было внести не везде, то потом придётся ещё и мучиться, отлавливая возникшие ошибки.

Чтобы избежать этого, в данной спецификации описаны методы определения кастомных медиазапросов, которые являются упрощёнными псевдонимами более длинных и сложных обычных медиазапросов. Таким образом, медиазапрос, используемый в нескольких местах, может быть заменён одним кастомным, который будет переиспользован столько раз, сколько понадобится. А если понадобится изменить его значение, это нужно будет сделать только в одном месте.

Пример

Чтоб увидеть, как именно работает плагин, давайте рассмотрим простенький пример его использования. Я буду использовать Gulp.

Как показано на странице плагина, первым делом объявим кастомный медиазапрос. Это будет размер экрана, на котором будет применяться альтернативное CSS-правило.

@custom-media --desktop (min-width: 900px);

1. Объявление кастомного медиазапроса начинается с инструкции @ custom-media и является некоторой альтернативой ключевому слову var в языке JavaScript, создающем переменную
2. На втором месте помещается название кастомного медиазапроса —desktop , которое, как и CSS-переменные, начинается с двух дефисов
3. На последнем месте размещается непосредственно условие, являющееся в данном случае контрольной точкой ширины экрана

Использование в стилях

После создания переменной, её можно подставлять в медиазапрос вместо условия

Конфигурация Gulp

Лично у меня приведённый в документации код настроек gulpfile.js не сработал, поэтому я его немного изменил

const gulp = require("gulp") const postcss = require("gulp-postcss"); const postcssCustomMedia = require("postcss-custom-media"); const rename = require("gulp-rename"); gulp.task("css", function() < return gulp.src("./src/style.css") .pipe(postcss([ postcssCustomMedia() ])) .pipe(rename("style.css")) .pipe(gulp.dest(".")) >);

После обработки мы получаем привычно оформленные стили

body < background-color: gray; >@media (min-width: 900px) < body < min-block-size: 100vh; background-color: red; >>

Заключение

Очень рад, что последняя преграда для перехода на чистый CSS преодолена. Хотя я и не зарекаюсь, что со временем могу снова вернуться или хотя бы периодически прибегать к работе с препроцессорами.

Желаю всем приятной разработки.

Источник

CSS Using Variables in Media Queries

Now we want to change a variable value inside a media query.

Tip: Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.). You can learn more Media Queries in our Media Queries Chapter.

Here, we first declare a new local variable named —fontsize for the .container class. We set its value to 25 pixels. Then we use it in the .container class further down. Then, we create a @media rule that says «When the browser’s width is 450px or wider, change the —fontsize variable value of the .container class to 50px.»

Here is the complete example:

Example

/* Variable declarations */
:root —blue: #1e90ff;
—white: #ffffff;
>

/* Styles */
body background-color: var(—blue);
>

h2 border-bottom: 2px solid var(—blue);
>

.container color: var(—blue);
background-color: var(—white);
padding: 15px;
font-size: var(—fontsize);
>

@media screen and (min-width: 450px) .container —fontsize: 50px;
>
>

Here is another example where we also change the value of the —blue variable in the @media rule:

Example

/* Variable declarations */
:root —blue: #1e90ff;
—white: #ffffff;
>

/* Styles */
body background-color: var(—blue);
>

h2 border-bottom: 2px solid var(—blue);
>

.container color: var(—blue);
background-color: var(—white);
padding: 15px;
font-size: var(—fontsize);
>

@media screen and (min-width: 450px) .container —fontsize: 50px;
>
:root —blue: lightblue;
>
>

Browser Support

The numbers in the table specify the first browser version that fully supports the var() function.

CSS var() Function

Источник

Using CSS Media Queries and Variables for Responsiveness

Responsiveness can be a bit tricky to get right. You’ll see so many debates or building mobile-first or desktop-first—just so many suggestions based on opinions that work for people.

Well, here’s just another trick that could make responsiveness more manageable.

Media queries are a way to target specific devices and screen sizes. By doing this, you can create or modify existing style declarations to target the current screen size. With media queries, you can:

• display a button on a desktop and hide it on a mobile device.
• use a large font size for a heading on a desktop, and smaller font on a mobile
• make a flex container wrap on a mobile device and cause it to un-wrap on a desktop

You can learn more about media queries here: Media queries — MDN.

The main thing to note here is that style declarations can be overwritten anywhere, including inside of media queries. This information will guide you throughout the rest of this article.

The term «variable» refers to a container that holds a value that can be changed. Variables are prevalent in programming languages and CSS, fortunately, is no exception.

Here’s how variables are created and used in CSS:

.container  --padding: 20px; padding: var(--padding); >

The double hyphen ( — ) used as a prefix for a custom property is used to declare a CSS variable, and that variable can be used as a value for any property using the var() function.

As stated earlier, style declarations can be overwritten. And style declarations also include variable declarations. This means you can do the following:

.container  --padding: 20px; padding: var(--padding); --padding: 10px;>

From the above, the .container element will have a padding of 10px as the highlighted line has overwritten the earlier declaration.

CSS Media Queries and Variables

From what we’ve seen above, it means you can do the following:

.container  --padding: 20px; padding: var(--padding); @media (max-width: 768px)  --padding: 10px; >>

The above means, on a larger screen than 768px, the .container element will have a padding of 20px . On a smaller screen, the .container element will have a padding of 10px .

Now let’s focus more on using this hack to make a responsive design more manageable.

Making Responsive Design Easier

In the following non-exhaustive list, I’ll show some ways you can achieve responsiveness using this hack.

Control the number of columns in a grid container

If you were to control the number of columns in a grid container without a variable, you’d probably have something like this:

.container  display: grid; grid-template-columns: repeat(4, 1fr); @media (max-width: 768px)  grid-template-columns: repeat(2, 1fr); > >

To reduce the number of times you have to write grid-template-columns , you can do this:

.container  display: grid; --columns: 4; grid-template-columns: repeat(var(--columns), 1fr); @media (max-width: 768px)   --columns: 2; > @media (max-width: 480px)  --columns: 1; >>

Using variables for responsive font sizes

Using this hack, here’s how you can change fonts across different screen sizes:

:root  --font-xl: 40px; @media (max-width: 768px)  --font-xl: 30px; > @media (max-width: 480px)  --font-xl: 20px; > @media (max-width: 320px)  --font-xl: 10px; > > h1  font-size: var(--font-xl); >

In the :root selector, we defined a variable for font size and overwrote it for different screen sizes. Now in the h1 element, we can use the variable, and depending on the screen size, the value for the font size will change.

I’ll add more examples here in due time. But I believe you already know how this hack can improve your development. You can use it in different suitable ways 🙃

Using media queries, variables, and overwriting of styles, we’ve seen how to improve our codes and make responsive design easier in this article.

Kindly share if you find this article helpful : )

Articles written with ❤ by
Dillion Megida

Источник