Интересно, можно ли добавить адаптивный масштаб? Я хотел бы разместить компонент боковой панели справа.
CSS
/* Получить ширину аватара пользователя и установить максимальную ширину контейнера для рекламы */
/* Стили контейнера для рекламы */
#list-area {
display: flex; /* Размещение рекламы с помощью flexbox */
flex-direction: column; /* Отображение рекламы вертикально */
gap: 0; /* Удаление отступов между изображениями рекламы */
padding: 0; /* Удаление отступов контейнера */
margin: 0; /* Убедиться, что вокруг контейнера рекламы нет лишних отступов */
max-width: 812px; /* Ограничить ширину контейнера рекламы максимум 812 пикселями (ширина аватара: 48 пикселей) */
}
/* Стили ссылки на рекламу */
.banner-ad {
display: block; /* Сделать контейнер рекламы блочным элементом */
width: 100%; /* Убедиться, что контейнер рекламы занимает 100% ширины */
max-width: 100%; /* Предотвратить превышение максимальной ширины */
margin: 0; /* Удалить отступы между контейнерами рекламы */
}
/* Адаптивные стили изображения рекламы */
.ad-image {
width: 100%; /* Убедиться, что изображение занимает всю ширину родительского элемента */
height: auto; /* Сохранить исходное соотношение сторон изображения */
max-width: 100%; /* Предотвратить превышение изображения максимальной ширины контейнера */
display: block; /* Исправить проблему пустого пространства внизу изображений */
margin: 0; /* Удалить любые дополнительные отступы вокруг изображения */
}
/* Адаптивный дизайн: корректировка отображения рекламы для больших и маленьких экранов */
/* Корректировка отображения рекламы на устройствах с шириной менее 768 пикселей */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Убедиться, что на мобильных устройствах нет лишних отступов */
}
.banner-ad {
width: 100%; /* Убедиться, что реклама занимает всю ширину на маленьких экранах */
}
.ad-image {
width: 100%; /* Убедиться, что изображение адаптируется к ширине контейнера */
height: auto; /* Сохранить соотношение сторон изображения */
}
}
/* Дальнейшая корректировка изображений рекламы на очень маленьких устройствах (например, телефоны в портретном режиме) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Убедиться, что изображения адаптируются к ширине экрана телефона */
max-width: 100%; /* Установить максимальную ширину 100%, чтобы избежать увеличения */
height: auto; /* Сохранить соотношение сторон изображения */
}
}
