css - 在减小屏幕宽度的同时平滑增加元素宽度

Question

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

.wrapper {
  width: 64%;

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

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

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

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

得到64个像素如下：

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

标签： csslessresponsive

Answer 1

Codepen 演示

---

您可以使用 lessloop来定义 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%;
  }
}