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

问题描述

有没有一种方法可以使用媒体查询随着屏幕大小的变化(连续/平滑)逐渐改变 CSS 属性的值.而不是设置一堆发生变化的断点(逐步)?

Is there a way to use media queries to change the value of a CSS property gradually as the screen changes size (continuously/smoothly). Instead of setting a bunch of break points at which there is a change (step-ly)?

喜欢这个网站:http://www.bluegoji.com/?当您缩小浏览器窗口时，页面顶部(导航栏)的

中 标签的边距会不断减少.

Like on this site: http://www.bluegoji.com/?The margins of the <a> tags in the <ul> at the top of the page (navbar) decrease continuously as you narrow the browser window.

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

That is the behavior I am trying to achieve.

或者解决方案只是使用如此多的媒体查询，以至于它似乎可以平滑地改变??

Or is the solution just to use so many media queries that it appears to change smoothly??

推荐答案

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

Consider using viewport percentage units.

来自规范:

5.1.2.视口百分比长度:vw、vh、vmin、vmax 单位

视口百分比长度是相对于初始包含块.当初始高度或宽度包含块被更改，它们相应地被缩放.

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 - 等于初始包含块宽度的 1%.
• vh unit - 等于初始包含高度的 1%阻止.
• vmin unit - 等于 vw 或 vh 中的较小者.
• vmax unit - 等于 vw 或 vh 中的较大者.
• 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.

演示

这篇关于随着屏幕尺寸的变化不断调整元素尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！