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

Question

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

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

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

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

Answer 1

考虑使用 视口(viewport)百分比单位 .

从规范:

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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

DEMO