tgoop.com/webdevlair/3932
Create:
Last Update:
Last Update:
Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px.
Ожидаемое поведение:• Круглый элемент с текстом по центру.• Размер круга меняется в зависимости от ширины экрана.
Решение задачи
<div class="circle">Текст</div>
.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #4CAF50;
color: white;
border-radius: 50%;
text-align: center;
font-size: 1.2em;
}
/* Размер для больших экранов */@media (min-width: 1024px) {
.circle {
width: 200px;
height: 200px;
}
}
/* Размер для планшетов */@media (min-width: 768px) and (max-width: 1023px) {
.circle {
width: 150px;
height: 150px;
}
}
/* Размер для мобильных устройств */@media (max-width: 767px) {
.circle {
width: 100px;
height: 100px;
}
}