Размеры для вёрстки по макету Zeos


#1

Добрый день.

Прошу помочь разобраться, сверстал макет из рассылки под названием Zeos, изначально не придал значения что ширина у макета 2000px (скрин с размерами ниже)


Вот то что наверстал - https://orlandis.github.io/1/

Открыл своё детище на мониторе с меньшим разрешением и горе, не влазит полностью всё, приходится в браузере процент отображения уменьшать чтобы всё поместилось.

Подскажите что можно сделать. Дело в том что там и макет большой и элементы в нём огроменные. Я самоучка, курсы позволить себе не могу, так что строго прошу не критиковать.

Спасибо.


#2

В своей верстке вы не используете центровщик содержимого. То есть кроме общей ширины макета, вы должны были определить и контентную ширину (примерно 1570 получается). Также для фоновых изображений не забывайте добавлять background-size: cover; чтобы фон корректно масштабировался в зависимости от ширины экрана просмотра.
Старайтесь как можно меньше использовать свойство width для сеточных элементов страницы. Прописывая ее изначально 2000px, вы привязываетесь к одному единственному разрешению.
Исправьте хотя бы эти недочеты, а потом можно будет перейти к разбору верстки подробно по блокам.


#3

Добрый день. Спасибо за отклик. Я внёс изменения предложенные Вами и попытался переделать вёрстку блоков на флексах. Добавил контейнер для центровки, правда на 1300 пикселей. Ситуация изменилась конечно, но как быть с картинками, они большие согласно макета, их все размеры с вёрстки я поубирал, всё исходно. Так же не масштабируюются шрифты, они остаются большими.
Пример переделанного по ссылке https://orlandis.github.io/1/


#4

Не совсем верно получился центровщик у вас. Блок с классом cont должен располагаться внутри header, понимаете? Вы должны центрировать контент внутри блока, а не сам header.
Статья по поводу шрифтов: https://webref.ru/recipe/2370
Что касается картинок, то здесь будет не обойтись без медиа-выражений.


#5

По-поводу центровщика, если я Вас правильно понял, глобальные секции header и main остаются на 100% ширины и держат в себе бекграунды, далее в этих блоках создаётся центровщик, который оптимально, я сделаю, шириной в 1200пикс, и там уже все остальные блоки будут центроваться, поправьте если ошибки ?? Второе, правильно ли я делаю используя флексы для позиционирования блоков ?? По-поводу статьи о масштабировании шрифтов - низкий поклон, проходил вроде внимательно он-лайн курс и не помню, чтобы там говорилось о данной единице измерения. Подведя итог нашего общения, могу предположить что данный макет не адаптировался дизайнером под стандартный размер фиксированной разметки, обычно это 960 - 1200пикселей, далее, на размеры этих макетов можно не обращать внимания и делать чисто для себя, подбирая свои размеры чтоб смотрелось приближённо к макету, я правильно думаю ??


#6

Да, здесь вы правы.
Использование флексов считаю неоправданным - в макете слишком мало контента. Можно обойтись обычным абсолютным позиционированием для изображений. Но только с грамотным сочетанием с относительным позиционированием. Чтобы не получилось top: 1600px; как у вас было в первом варианте.

Если ваша цель не pixel perfect, то для себя можете и приближенно делать, по крайней мере на начальном этапе, пока учитесь выстраивать сетку страницы.


#7

У меня ещё будут вопросы, мы можем общаться в телеграм, думаю так будет быстрее https://t.me/mandzya_bn


#8

Вы имеете ввиду разбивать сетку на несколько абсолютных блоков и внутри них относительно позиционировать элементы страницы ?? Есть у Вас хороший материал по сеткам, нужно нормально разобраться в этой теме ??


#9

Что-то напутали.
Почитайте, чтобы вспомнить: https://webref.ru/layout/learn-html-css/positioning-content