Как использовать разные css свойства в зависимости от ширины контейнера (адаптивность)

@Maksim1307 · Регистрация: 04.11.2020

Студворк — интернет-сервис помощи студентам

внутри всех section, footer и header есть div class="container". Его ширина задаётся css переменной --container-width. Эта переменная будет изменяться в зависимости от ширины экрана таким образом:

CSS
1
2
3
@media screen and (min-width: 720px){
   --container-width: 540px;
}

А содержимое контейнера должно менять свои css свойства в зависимости от --container-width

Code
1
2
3
@media <не знаю что сюда написать>{
   //<...>
}

Вопрос: что должно стоять вместо <не знаю что сюда написать> чтобы всё работало как мне надо?
То есть в @media мне надо отслеживать не ширину окна, а значение переменной --container-width. Как это сделать?

@AlexZaw · 10.07.2021, 12:16

Сообщение от Maksim1307

Как это сделать?

Переменные могут быть значением свойства элемента, а поскольку медиа запросы не являются элементами то переменные в них использовать нельзя.
https://www.w3.org/TR/css-vari... -variables
Так что остается только ждать пока повсеместно не заработают container queries.

p.s. Если вам известна ширина экрана при которой изменяется переменная --container-width, то зачем вам вообще использовать посредника в виде переменной? Почему просто не изменять свойства элементов внутри div class="container" при достижении нужной ширины экрана?

@shvyrevvg · 10.07.2021, 13:56

Maksim1307, а в чем профит?

CSS
1
2
3
4
5
6
@media screen and (min-width: 720px){
   --container-width: 540px;
}
@media screen and (--container-width){
   /* styles */
}

vs

CSS
1
2
3
4
@media screen and (min-width: 720px){
   --container-width: 540px;
   /* styles */
}

@Maksim1307 · 10.07.2021, 15:51 **[ТС]**

Сообщение от AlexZaw

Почему просто не изменять свойства элементов внутри div class="container" при достижении нужной ширины экрана?

Мне нужна переменная с шириной контейнера чтобы позиционировать некоторые элементы.

Например, на картинке отступ сверху у кнопки "подробнее" делается таким образом:

Code
1
2
3
4
5
.more-about-button{
    position: absolute;
    right: -35px;
    top: calc(var(--container-width) * var(--img-height-width-ratio) - 35px)
}

Без --container-width так не получилось бы. Иначе пришлось бы менять не только ширину контейнера, но и свойство top у more-about-button, а это уже не очень удобно. Насколько я понял, css не позволяет сделать это так как я хочу? Есть ли другие способы сделать это?

@AlexZaw · 10.07.2021, 16:22

Сообщение от Maksim1307

Без --container-width так не получилось бы

Ок, допустим у вас есть следующий код:

CSS
1
2
3
@media <здесь запрос основанный на --container-width>{
   
}

как в этом случае должен выглядеть код который отвечает за позиционирование more-about-button при --container-width, допустим, 300px ?

@shvyrevvg · 10.07.2021, 16:31

Maksim1307, а чем не подходит?

CSS
1
2
3
4
5
@media screen and (min-width: 720px){
  .container {
     --container-width: 540px;
  }
}

Не по теме:

По-моему, Вы перемудрили с переменными.

@Maksim1307 · 10.07.2021, 17:52 **[ТС]**

Сообщение от AlexZaw

как в этом случае должен выглядеть код который отвечает за позиционирование more-about-button при --container-width, допустим, 300px ?

--container-width мне нужен чтобы подсчитать отступ сверху у кнопки:

Code
1
top: calc(var(--container-width) * var(--img-height-width-ratio) - 35px)

этот код должен быть универсальным для любого значения --container-width

Сообщение от shvyrevvg

а чем не подходит?

Вроде должно подойти.

А в css есть переменная, которая имеет значение ширины окна в пикселях? Если да, то ширину контейнера можно будет задать в процентах, и --container-width не понадобится

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .