Блог

У меня есть div то, что я хотел бы иметь следующую ширину: если его ширина меньше 1200 пикселей, ширина составляет 80% от ширины экрана. Но его максимально возможная ширина не может превышать 1200 пикселей.

Предполагая div wrapper , что вызывается класс s, я хотел бы, чтобы я мог это сделать:

 $content-width: 80%;
$max-content-width: 1200px;

.wrapper {
    max-width: $max-content-width;
    @include media-query(calc(#{$max-content-width} * (200%-#{$content-width}))) {
        max-width: $content-width;
}}
 

Но этот медиа-запрос не работает. Поскольку мне нужно изменить max-width атрибут, когда экран достигает 120% $content-width , как я могу выполнить эту арифметику без жестко заданных чисел?

Codepen

В следующем я использую vw вместо % , но он должен работать с любым устройством.

 $width: 80vw;

$max: 1200px;


div {
  width: $width;  
}


@media (min-width: calc(#{$max}   (100vw - #{$width}))) {
  div {
    width: $max;
  }
}

 

Проблема, с которой столкнулся ваш вопрос, заключалась в том, что у нас не было фиксированного значения, когда применять точку останова. Мы можем решить эту проблему, добавив разницу между 100vw и $width ( 80vw ) в $max ( 1200px ), и пусть браузер сделает все остальное.

 calc(#{$max}   (100vw - #{$width})) == $max   (100vw - $width) == 1200px   20vw