Как сделать только хедер адаптивным на неадаптивном сайте?
Есть старый сайт, не адаптированный под малые экраны (PHP + HTML/CSS/JS). В теге head тег <meta name="viewport"..> отсутствует, поэтому содержимое страницы отображается, подстраиваясь по размеру экрана - получается мелко.
До полной адаптации сайт под мобильные еще далеко, но есть желание сделать адаптивным хотя бы хедер.
Т.е. подразумевается, что при открытии на мобильнике хедер будет выглядеть как распространный в таких случаях прямоугольник с логотипом и значком "гамбургер". Нажимая на гамбургер мы видимо модальное окно с пунктами меню
Моих знаний не хватает.
Если указываю в теге head тег
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
. оказывается, что адаптировать теперь нужно все страницы.
Если я не указываю <meta name="viewport" ...>, то стейтменты в медиа-запросах не применяются.
Правильно ли я в принципе понял, что без тега
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
медиа-запросы и контейнер-запросы ("container queries") не работают?
Как мне сделать адаптивным пока только хедер?
Дополнительно:
Помещайте код в <code></code>, а то съедает.
Ответы:
С чего вы взяли что медиа-запросы не работают без тега meta viewport???
Единственное, что происходит без этого тега - мобильники задают некую виртуальную ширину устройства, обычно это 980px, и в нее рендерят сайт.
Соответственно вам никто не мешает прописать например@media only screen and (max-width: 990px) {}
и там стили адаптива свои накидать. Просто держите в уме, что оно отрендерится в 980 а потом запихается в 360 например, т.е. размеры задавайте с учетом масштаба, вот и все.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать только хедер адаптивным на неадаптивном сайте, вам потребуется добавить несколько CSS правил. Вот как вы можете это сделать:
1. Создайте медиа-запрос для адаптивного дизайна. Медиа-запрос позволяет указать определенные стили для определенного диапазона ширины экрана. Например, для устройств с шириной экрана менее 768px вы можете использовать следующий медиа-запрос:
@media only screen and (max-width: 768px) { /* Ваши стили здесь */ }
2. Внутри медиа-запроса добавьте стили для адаптивного хедера. Например, вы можете изменить ширину элементов, размер шрифта, отступы и другие свойства, чтобы сделать хедер более удобным для просмотра на мобильных устройствах:
@media only screen and (max-width: 768px) { .header { width: 100%; padding: 10px; text-align: center; } .logo { width: 50%; } .menu { display: none; } }
3. Убедитесь, что ваш хедер имеет правильную структуру HTML. Обычно хедер состоит из элементов как логотип, меню навигации и других элементов. Убедитесь, что вы используете семантические теги, такие как