Я настраиваю отзывчивый колонтитул на своем сайте.Это выглядит почти хорошо, потому что 90% устройств, установленных дебаггером, хорошо отображают содержимое нижнего колонтитула, но я не знаю, что является хорошей практикой для небольших устройств.
Я предоставляю несколько значков мультимедиа внутри нижнего колонтитула, которые должны перенаправлять пользователя на другую страницу.Я использую Bootstrap 4 для отображения изображений в контенте, и он отлично работает.Я работаю с Django, поэтому я сократил HTML и CSS для каждой части страницы.
Вот так выглядит HTML-код нижнего колонтитула прямо сейчас:
{% block footer %}
<footer class="footer">
<div class="social-media hidden-xs">
<li>
<i class="fab fa-facebook-square"></i>
</li>
<li>
<i class="fab fa-instagram"></i>
</li>
<li>
<i class="fab fa-pinterest"></i>
</li>
<li>
<i class="fab fa-linkedin"></i>
</li>
<li>
<i class="fas fa-search-location"></i>
</li>
</div>
</footer>
{% endblock %}
И у меня есть тот CSS-код для его стилизации:
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: white;
}
.footer .social-media {
display: flex;
width: 450px;
margin: 0 auto;
}
.footer .social-media > li {
list-style: none;
display: inline-block;
margin: 10px auto;
font-size: 20px;
padding: 10px 10px;
}
Что является хорошей практикой при созданиисайт с предоставленным нижним колонтитулом?Укажите для каждого устройства разрешение разного стиля?Или адаптивное решение - хорошая идея?
Прямо сейчас на главной странице это выглядит так:
https://imgur.com/a/wAMY6tn «нижний колонтитул с полным разрешением страницы в браузере»
https://imgur.com/a/XneMssK «нижний колонтитул с другим меньшим разрешением в браузере»
https://imgur.com/a/Wahn4Gg «нижний колонтитул с действительно небольшим разрешением»
Я хотел бы добиться результата, которыйв основном практикуется в веб-программировании с отзывчивыми частями нижнего колонтитула.