Блог

Привет, я создаю проект react и пытаюсь добавить несколько кругов на свою страницу (5), я создал их с фиксированным размером, я не могу найти способ изменить их размер в соответствии с размером окна, когда я сворачиваю браузер, круги остаются того же веса и длины.

HTML и CSS:

 .y_dot{
    position: absolute;
    width: 336px;
    height: 336px;
    left: -5%;
    bottom: -10%;
    border-radius: 50%;
    background: #EBD510;

}  

 <div className="Circle_App">
        <h1 className="appHeader"> Welcome</h1>
        <div>
            <span class="b_dot"></span>
            <span class="g_dot"></span>
            <span class="p_dot"></span>
            <span class="y_dot"></span>
            <span class="o_dot"></span>
        </div>
</div>  

Конфигурация CSS других пролетов практически такая же, она просто изменяет положение или размер окружности.

У кого-нибудь есть намек на это?

Вы можете использовать либо vh (высота окна просмотра), либо vw (ширина окна просмотра), а не px, чтобы ваше значение зависело от размера окна просмотра.

 // will set height and width to 
// 5% of window’s width
.y_dot {
    height: 5vw;
    width: 5vw;
}
  

Альтернативный способ — использовать медиа-запросы для создания правил, которые применяются, когда окно определенного размера.

 // will set height and width of dot to 
// 300px when screen is smaller than 600px.
@media only screen and (max-width: 600px) {
  .y_dot {
    height: 300px;
    width: 300px;
  }
}