随着屏幕尺寸的变化不断调整元素尺寸答案

【问题标题】：Continuously adjust element size as screen size changes随着屏幕尺寸的变化不断调整元素尺寸
【发布时间】：2016-07-30 03:31:26
【问题描述】：

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

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

这就是我想要实现的行为。

或者解决方案只是使用如此多的媒体查询以使其看起来变化顺利？

【问题讨论】：

标签： css responsive-design media-queries flexbox

【解决方案1】：

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

来自规范：

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

视口百分比长度与初始包含块。当初始的高度或宽度包含块被更改，它们会相应地缩放。

vw unit - 等于初始包含块宽度的 1%。

vh unit - 等于初始包含高度的 1% 阻止。

vmin 单位 - 等于vw 或vh 中的较小者。

vmax 单位 - 等于vw 或vh 中的较大者。

DEMO

【讨论】：

【解决方案2】：

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

这是一个例子：

HTML

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

CSS

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

【讨论】：

【解决方案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>

【讨论】：