随着屏幕大小的变化连续调整元素大小

Question

有没有办法使用媒体查询逐渐改变CSS属性的值，因为屏幕会改变大小（连续/平滑）。而不是设置一系列有变化的断点（step-ly）？

喜欢本网站：http://www.bluegoji.com/？ 页面顶部（导航栏）<ul>中<a>标签的边距会随着缩小浏览器窗口而不断减小。

这是我试图实现的行为。

或者只是使用这么多的媒体查询，它似乎改变顺利的解决方案??

Answer 1

使用大量媒体查询是一种方法。但它可能不是最好的方法。

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

从规格：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

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

• vw单位 - 等于初始包含块的宽度的1％。
• vh单位 - 等于初始包含 块的高度的1％。
• vmin单位 - 等于较小的vw或vh。
• vmax单位 - 等于较大的vw或vh。

DEMO

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

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>