@Dimasssiky
Пытаюсь стать программистом

Как правильно настраивать размеры сайта?

Всем привет. Недавно решил научиться верстать сайты, чтобы на фрилансе подрабатывать, да и для себя интересно. Изучаю все сам, ищу информацию на различных сайтах, форумах, смотрю видеоуроки и тп
Решил сверстать десяток макетов, чтобы набить руку, нашел различные бесплатные макеты в интернете.
Работаю за ноутбуков с разрешением экрана 1366 x 768.
Сайт на макете в ширину 1440px. В шапке на фоне изображение.

21923198_m.png

Вставляю в header на фон изображение из макета, открываю в браузере - изображение обрезано, но занимает полную страницу, без прокрутки.
21923197_m.png

Если смотреть в разрешении мобильного телефона, то съезжает меню
21923200_m.png

Думаю, ладно, наверное нужно добавить ширину Header. Ставлю ширину по макету, обновляю, и у меня появляется горизонтальная полоса прокрутки, но изображение теперь не обрезано
21923199_m.png
А вот, если в разрешении мобильного экрана, то все нормально, ровно входит и ничего не съезжает
21923202_m.png
А если отдалять, то прижимается к левому краю
21923203_m.png

Прошу помочь с данной проблемой и подсказать, как правильно выставлять размеры станицы, чтобы ничего не съезжало при отдалении, приближении.
P.S. Про медиа запросы краем уха слышал, но по моему тут как-то по другому можно решить данную проблему
  • Вопрос задан
  • 555 просмотров
Пригласить эксперта
Ответы на вопрос 2
sagrana
@sagrana
Вёрстка и немного кодинга)
Для того, чтобы изображение всегда было 100% от ширины экрана, высота его должна быть «плавающей».

Вариант №1, в котором фон - это элемент img.
В этом случае высота header всегда будет подстраиваться к высоте изображения. Но чтобы изображение было фоном, все остальные дочерние блоки в шапке должны будут быть в блоке с position: absolute;

Вариант №2, в котором фон задается через background у header.
Для этого нам необходимо знать высоту header, которая будет для разной ширины экрана разной. В этом случае спасают относительные единицы измерения vw и rem.
Не уверена, что этот мой способ самый правильный и оптимальный, но он работает.
Ответ написан
Комментировать
darakanoit
@darakanoit
Веб-разработчик
Bootstrap 4 попробуйте) Он сделает многие вещи за вас.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы