@DeniSidorenko

Как вообще такое сделать в верстке?

Добрый день, поступил на верстку сайт. Интернет магазин с главной страницы в винде Landing Page. Но вопрос в другом. Макет выполнен дизайнером 1920 в ширину( при этом 1620px занимает контент). Я сделал как привычно сверстал все как по макету на широком экране, т.е что бы на 1920 было точно как на макете, а после начал ниже ставить брек пойнты , делать отступы от краев меньше и.т.п. Заказчику понравилась верстка в плане элементов, но удивился почему на его ноутбуке( 1366 ширина в браузере ) не точно как по макету размеры. Он хотел увидеть с те же пропорции по отступам что и на макете. Но проблема в том что контент на макете в 1620 в ширину, и забит он контентом хорошо, тупо впихнуть его весь + такие отступы на 1366 как по мне нельзя. Подскажите пожалуйста были ли у вас такие случаи и как поступали. Я думаю объяснить заказчику что если макет имеет лишь контент 1620, его нельзя впихнуть в условно ( 1100 ) , чисто физически не хватает пространство. Заранее спасибо
  • Вопрос задан
  • 1464 просмотра
Решения вопроса 5
alex-1917
@alex-1917
Если ответ помог, отметь решением
А макет показать, как обычно, не позволяет режим совершенной секретности, да?
Только что отзвонился Ванге, она говорит, не может такого быть, чтобы нельзя было уменьшить, у вас плёвое дело - с 1600 до 1200 ужать. Это вы еще не ужимали 1900 до 980!!!
Премного восхищен всеми ответившими ниже, которые умудрились с пары слов ТС воссоздать полную картину и дают советы. Мне бы ихний УМ!
А заказчик ваш конечно самодур тот еще, судя по всему, он открывает на двух разных устройствах и сравнивает попиксельно, чтоб вы ни одного блока не посмели утаить)))
Вы тоже не лучше, по вашим словам, у вас был период обсуждения именно этой проблемы, но вы включили заднюю, а должны были требовать макет под требуемое разрешение.
Заказчик с вас не слезет и следующий его запрос внутри текущего бюджета - а впихни-ка ты мне тоже самое еще и в айпад, тыжпрограммист!
Ответ написан
verkhoturov
@verkhoturov
HTML-Верстальщик / Frontend Developer
Решение есть
Можно заменить размеры шрифтов и элементов. Вместо фиксированных (в пикселях) на относительные (в "vw").

Теория
Например, при разрешении 1920px шрифт размером 12px будет соответствовать размеру 0.63vw (это можно вычислить самому или в онлайн сервисе или в отладчике браузера). При изменении размера экрана, размер шрифта будет пропорционально изменяться. Если размеры остальных элементов изменить на "vw", то можно сделать чтобы всегда было "как в макете" при любом разрешении экрана.

Практика
Как делаю я на примере SASS:
1. Если макетов два (мобильная версия с базовой шириной 320px и десктоп версия с базовой шириной, например, 1920px) я делаю два миксина с брейкпоинтами:

=largeScreen
  @media only screen and (min-width: "1919px")
    @content

=mobileScreen
  @media only screen and (max-width: "767px")
    @content


2. Рассчитываем размеры элементов.
Будем сходить из того, что у верстки будет три состояния:
  • размер менее 768px
  • более 768px но менее 1920px
  • более 1920px


Чтобы для каждого размера экрана вычислить соответствующий vw элемента, прописываем в SASS такие функции:
@function large($target)
  $vw-context: (1920/1920)
  @return ($target * $vw-context) * 1px

@function base($target)
  $vw-context: (1920 * .01)
  @return ($target/$vw-context) * 1vw

@function mobile($target)
  $vw-context: (320 * .01)
  @return ($target/$vw-context) * 1vw


Что тут вообще происходит? ))

Разберем функцию "base":
@function base($target) // пиксельный размер элемента, которое мы передаем в функцию
  $vw-context: (1920 * .01) // "1920" базовый размер макета десктопной версии, умножаем на "0.01" чтобы получить соотношение 1% экрана(=1vw) к пикселям макета.
  @return ($target/$vw-context) * 1vw // возвращаем соотношение размер элемента в "vw"


Аналогично работают остальные функции, за исключением large.
В ней мы возращаем размеры в пикселях. Т.е. используем "классический" способ, когда есть фиксированная контентая часть - все что внутри нее с фиксированными размерами, а вне растягивется по ширине экрана.
В моем примере функции large базовый размер экрана и максимальный совпадают, но вам ничего не маешает задать максимальный размер, например, в 2560px. (тогда в функции вторая строка будет иметь виж $vw-context: (2560/1920) )

3. Прописываем все это в стилях элемента
Например (SASS синтаксис):
.title 
 font-size: base(12)
 +largeScreen
     font-size: large(12)
 +mobileScreen
     font-size: mobile(12)


В CSS мы получим элемент с относительным размером. В трех разных диапозонах.

ВАЖНО! Такой способ подходит, когда нужно просто сделать гибкий лэндинг и у заказчика нет строгого стайл гайда, когда все размеры элементов четко прописаны в документе.
Ответ написан
Benzy
@Benzy
Html-верстальщик
В таких ситуациях я объясняю, что макет для 1920 и на ноуте может немного отличаться, что это нормально.
Но если запариться, то можно и на 1366 сделать один в один макету, просто, уменьшая все элементы на странице
Ответ написан
alexyarik
@alexyarik
Битрикс разработчик
Переведите стрелу на дизайнера. Затребуйте у заказчика макет дизайна для ноутбуков, обосновать можно тем, что когда контент шире разрешения ноутбука должен предоставляться отдельный макет дизайна.
Заказчик обратится к дизайнеру и у него естественно не получится все впихнуть в это разрешение, что приведет к разработке новой версии макета для ноутбуков, в итоге у них на выходе родится согласованный макет, который вы и сделаете.
Ответ написан
@kupurim
Обычно когда дают на верстку макеты без адаптивов, то говорю что будет сделано на мой выбор.
Если не нравиться, то давайте макеты. В противном случае работаем и если будут какие-то правки именно по адаптиву, то не вопрос, это дополнительные правки которые оплачиваются.

Это вам на будущее, а с этим заказчиком придется уже спорить и попытаться доказать что не прав он (что иногда бывает сложно ибо твердолобые встречаются).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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