随着屏幕尺寸的变化持续调整元素大小

Question

有没有办法使用媒体查询在屏幕尺寸改变时逐渐改变CSS属性的值（连续/平滑地）。而不是在某些断点处进行更改（分步骤）？就像这个网站：http://www.bluegoji.com/上的行为一样。当你缩小浏览器窗口时，页面顶部（导航栏）<ul>中<a>标签的边距会连续减少。 这就是我想要实现的行为。或者解决方案只是使用太多的媒体查询，以使其似乎平滑过渡？

- currenthandle

Answer 1

考虑使用视口百分比单位。

来自规范:

5.1.2. 视口百分比长度: vw, vh, vmin, vmax 单位

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

• vw单位 - 相当于初始包含块宽度的1%。
• vh单位 - 相当于初始包含块高度的1%。
• vmin单位 - 相当于vw和vh中较小的一个。
• vmax单位 - 相当于vw和vh中较大的一个。

演示

- Michael Benjamin

Answer 2

你需要的不是媒体查询。你可以使用百分比来设置宽度、边距和内边距。这是正常的做法。

以下是一个示例：

HTML

<div>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
</div>

CSS

a {
    width:25%;
    display:block;
    float:left;
}

- nathan felix

Answer 3

你提供的例子使用了 flexbox，类似这样：

ul {
  margin: 0;
  padding:0;
}
li {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  outline: 1px solid silver;
}

@media screen and (min-width: 500px){
  ul {
    display: flex;
    flex-direction: row;
  }
  li {
    flex-grow: 1;
  }
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

- vahanpwns