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

Posted 2023-03-06

【中文标题】随着屏幕尺寸的变化不断调整元素尺寸

【英文标题】：Continuously adjust element size as screen size changes

【发布时间】：2016-07-30 03:31:26

【问题描述】：

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

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

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

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

【参考方案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>