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

Question

[Дмитрий]

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



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


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


Думаю, ладно, наверное нужно добавить ширину Header. Ставлю ширину по макету, обновляю, и у меня появляется горизонтальная полоса прокрутки, но изображение теперь не обрезано

А вот, если в разрешении мобильного экрана, то все нормально, ровно входит и ничего не съезжает

А если отдалять, то прижимается к левому краю


Прошу помочь с данной проблемой и подсказать, как правильно выставлять размеры станицы, чтобы ничего не съезжало при отдалении, приближении.
P.S. Про медиа запросы краем уха слышал, но по моему тут как-то по другому можно решить данную проблему

Answer 1

[Sagrana]

Для того, чтобы изображение всегда было 100% от ширины экрана, высота его должна быть «плавающей».

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

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

Answer 2

[Дархан]

Bootstrap 4 попробуйте) Он сделает многие вещи за вас.

Comments

[Сергей delphinpro]

какой бутсрап? У человека нет минимальных знаний.. Тут чтиво нужно советовать, а не фреймворки.