Question

style.less文件中有一些代码：

.wrapper {
  width: 64%;

  @media screen and (max-width: 768px) {
    width: 82%;
  }

  @media screen and (max-width: 320px) {
    width: 94%;
  }
}

如您所见，当屏幕宽度为768px时，.wrapper元素的宽度必须为82％。

是否可以编写任何允许每64个像素平滑增加.wrapper元素宽度的函数？

64个像素如下：

（1920px-768px）/ 18，其中18是64到82之间的百分比

Answer 1

Codepen demo

您可以使用较小的loop来定义18个断点的宽度，并且可以定义宽度上的过渡以具有平滑的调整大小

@iterations: 0;
.wrapper {
  transition: width .5s 0s;

  .wrapper-for (@i) when (@i < 19) {
     @media screen and (max-width: (1920px - @i * 64)) { width: (64% + @i); }
     .wrapper-for(@i + 1);
  }
  .wrapper-for (@iterations);
}

它编译成

.wrapper {
  transition: width .5s 0s;
}

@media screen and (max-width: 1920px) {
  .wrapper {
    width: 64%;
  }
}
@media screen and (max-width: 1856px) {
  .wrapper {
    width: 65%;
  }
}

//[14 breakpoints]...

@media screen and (max-width: 832px) {
  .wrapper {
    width: 81%;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    width: 82%;
  }
}

Answer 2

如果我们认为您的元素将是64%的{{1}}和1920px的{{1}}，那么您的元素需要从82%到{ {1}}也可以在768px到1228.8px之间看到它。

我们也可以像下面这样写

629.76px

其中X应该位于100vw - 691.2px的{{1}}和100vw - 138.24px的{{1}}。我们可以将其写为100vw - (691.2px - X)，将其写为0，但是在1920px时，它将给我们的552.96px几乎是768px的两倍，因此我们可以写为{ {1}}为1920px - 100vw，那么我们的公式将为

在下面的示例中，当屏幕尺寸为768px时，红色应几乎与蓝色相等，而当屏幕尺寸为1920px时，其应等于绿色：

1152px

552.94px

以上逻辑将在X和(1920px - 100vw)/2,08之间的100vw - 691.2px + (1920px - 100vw)/2,08和768px之间创建线性转换。您可能会注意到，在.box { width:calc(100vw - 691.2px + (1920px - 100vw)/2.08); height:50px; background:red; } .one, .two { height:50px; } .one { width:64%; background:green; } .two { width:82%; background:blue; } body { margin:0; }上您将没有<div class="box"> </div> <div class="one"> </div> <div class="two"> </div>，因为该点不属于我们定义的线性函数。在1920px，我们将有768px，因此它是64%。

如果您希望从82%到320px的另一个线性转换具有94%和320px

，则可以使用另一个公式

100vw + 78.03px

124%

768px

使用上述代码，我们现在在320px处将82%保留其他百分比。

平滑增加元素宽度，同时减小屏幕宽度

2 个答案: