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

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%。

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

64个像素点如下：

(1920px - 768px) / 18, where 18 are percents between 64 and 82

Answer 1

Codepen demo

您可以使用 less 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% 位于 1920px 和 82% 位于 768px，那么您的元素需要从 1228.8px 开始到 629.76px 我们也可以将其视为 100vw - 691.2px 到 100vw - 138.24px.

我们也可以这样写

  100vw - (691.2px - X)

其中 X 在 1920px 处应为 0，在 768px 处应为 552.96px。我们可以把它写成 1920px - 100vw，它会给出我们的 0，但是当在 768px 时，它会给我们 1152px，这几乎是 552.94px 的两倍，因此我们可以写 X 为 (1920px - 100vw)/2,08 那么我们的公式将是

  100vw - 691.2px + (1920px - 100vw)/2,08

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

.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% 和 94%

，您可以使用另一个公式

  100vw - 138.24px + (768px - 100vw)/3.76

.box {
 width:calc(100vw - 691.2px + (1920px - 100vw)/2.08);
 height:50px;
 background:red;
}
.one,
.two,
.three{
  height:50px;
}
.one {
  width:64%;
  background:green;
}
.two {
  width:82%;
  background:blue;
}

.three {
  width:94%;
  background:purple;
}



@media all and (max-width:768px) {
 .box {
   width:calc(100vw - 138.24px + (768px - 100vw)/3.76);
 }

}

body {
 margin:0;
}

<div class="box">
</div>

<div class="one">
</div>

<div class="two">
</div>

<div class="three">
</div>

使用上面的代码，我们现在将 94% 设为 320px 并保持其他百分比。

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

Smooth increasing of element width while reducing screen width

css

less

responsive