Непрерывно регулировать размер элемента при изменении размера экрана

Question

Есть ли способ использовать медиа-запросы для изменения значения свойства CSS постепенно, так как экран меняет размер (непрерывно/плавно). Вместо того, чтобы устанавливать кучу точек разрыва, при которых происходит изменение (шаг-1)?

Как на этом сайте: http://www.bluegoji.com/? Поля тегов <a> в <ul> в верхней части страницы (navbar) постоянно уменьшаются, когда вы сужаете окно браузера.

Это поведение, которого я пытаюсь достичь.

Или это решение, чтобы использовать так много медиа-запросов, что оно выглядит плавным?

Answer 1

Использование множества медиа-запросов - один из способов. Но это не лучший метод.

Рассмотрите возможность использования viewport процентных единиц.

Из спецификации:

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

окна просмотра-процентного длины по отношению к размеру начального содержащего блока. Когда изменяется высота или ширина исходного блока , они соответственно масштабируются.

• Блок оч.сл. - равно 1% от ширины начального содержащего блока.
• vh unit - равно 1% от высоты исходного, содержащего блок.
• vmin unit - В равной степени меньше 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>