Отрегулируйте ширину и высоту при уменьшении размера экрана

Question

Как сделать ширину и высоту круга, который я сделал, автоматически уменьшенным в соответствии с размером экрана?

Я установил ширину и высоту 40px

Код:

.circle {
    display: block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #b7b7b7;
    margin-right: 2%;
    outline: none;
    -webkit-transition: ease-in .5s;
    -o-transition: ease-in .5s;
    -moz-transition: ease-in .5s;
    transition: ease-in .5s;
}

Я пытался использовать cal c для ширины и высоты, используя это

width:calc(100% - 40px);
height:calc(100% - 40px);

Но, похоже, это не работает. Я слышал некоторые источники, что cal c является ключом к этому. Я работаю с контейнером 1920px и минимальный размер экрана составляет 320px . Есть ли какой-нибудь правильный способ реализовать функцию cal c для ширины и высоты?

Спасибо

Answer 1

Вы можете использовать vw и vh (1% доступной ширины и высоты соответственно), сотрудничая с медиа-запросом. Пример:

@media screen and (max-width: 820px) {
  .circle {
    width: calc(100% - 5vw);
  }
}