Чистый CSS оператор if/else с использованием пользовательских единиц измерения переменных размера

Я хочу решить свою проблему только с помощью чистого CSS. Вот проблемный код, который у меня есть:

@if (100vh > 830px) {:root { --cwv:100vh;}}
@else {:root { --cwv: 830px;}}

Что я пытаюсь сделать: если размер окна браузера меньше 830 пикселей, "- -cvw" (переменная/единица пользовательской ширины) должна быть относительной (еще одна проблема, которую мой код, вероятно, has) до 830px, а не 100vw (встроенная единица "вертикальной ширины" области просмотра), так как элементы на странице становятся слишком маленькими.

Я знаю, что могу использовать несколько других способов решить эту проблему, используя другие языки, но мне просто интересно, как заставить код CSS работать - как он должен - в соответствии с местами, которые я исследовал:

Что я делаю не так? Я ожидаю, что у меня есть несколько синтаксических ошибок в моем коде (который я указал выше) тоже... :/


variables css viewport-units conditional
person Community    schedule 13.05.2016    source источник
comment
В CSS нет операторов if/then. У него есть несколько правил, которые выбираются селекторами и/или медиа-запросами. Вы слышали о медиа-запросах? Если нет, вернитесь и освежите свой базовый CSS.   -  person    schedule 13.05.2016

Ответы (2)


arrow_upward
1
arrow_downward

Используйте медиазапросы max-width. Пример:

По умолчанию --cwx настроен на ширину области просмотра:

:root{
  --cwv: 100vw;
}

В случае, если ширина области просмотра меньше или равна 830px, установите --cwx на 830px:

@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}

Наконец, для черной полосы примера будет установлено значение ½ от --cwx, то есть ½ ширины окна просмотра, но не менее ½ от 830px (=415px):

:root{
  --cwv: 100vw;
}
@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}

body{
  margin: 0;
}

:root::after{
  content: "";
  display: block;
  background: black;
  height: 10px;
  width: calc(var(--cwv) * .5);
}

person Community    schedule 13.05.2016

arrow_upward
0
arrow_downward

используйте медиа-запросы для размера окна, как показано ниже

@media screen and (min-width : 830 px) {

  /* your code */

 }
person Dhaval Chheda    schedule 13.05.2016