SCSS中屏幕百分比的算法

Question

我有一个div，我想要有以下宽度:只要它的宽度小于1200 80，宽度是屏幕宽度的80%。但其最大可能宽度不能超过1200 be。

假设div的类名为wrapper，我希望我能做的是：

$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;
}}

但是这个媒体查询不起作用。当屏幕达到$content-width的120%时，我需要更改$content-width属性，那么在没有硬编码数字的情况下，我该如何做这些算术呢？

Answer 1

科德芬

在下面的文章中，我使用的是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