Question

当屏幕改变大小（连续/平滑）时，是否有办法使用媒体查询逐渐更改CSS属性的值。而不是设置一堆有变化的断点（步骤）？

喜欢这个网站：http://www.bluegoji.com/？当您缩小浏览器窗口时，页面顶部（导航栏）<a>中<ul>标记的边距会不断减少。

这是我想要实现的行为。

或者解决方案只是使用如此多的媒体查询，它似乎可以顺利改变？

Answer 1

您正在寻找的不是媒体查询。您可以按百分比设置宽度，边距和填充。这是正常的做法。

以下是一个例子：

HTML

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

CSS

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

Answer 2

您提供的示例使用这样的flexbox：

＆＃13;

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

＆＃13;

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

＆＃13;

随着屏幕尺寸的变化，不断调整元件尺寸

2 个答案: