Как верстать 18 колоночный макет?

Объясните заказчику, что это не адаптивность и что верстка зависит не от разрешения экрана, а от разрешения viewport. И что сделать такое на десктопах будет сложно. На мобильных и планшетах вы можете через мета-тег viewport указать нужную ширину сайта.

18 колонок — не проблема. Наверняка вы какой-нибудь Bootstrap используете, поэтому вы можете собрать его с 18-ю колонками (в исходниках файлов препроцессора переменная @grid-columns или как-то так).

Даже если вы не используете Bootstrap (а это хорошо, вы молодец), то сделать 18 колонок — то же самое, что сделать обычные 12.

Рустам Байназаров, Спасибо. Этот макет верстаю просто на флексах, ширину блоков задаю в процентах. Честно говоря, засомневалась, а не верстается ли это как-то "резиново". Но не могу понять как это вообще возможно. Впихнуть невпихуемое.

jafrate, заказчик не в теме просто. На десктопах не работает масштабирование сайта. Либо я не знаю, что оно работает. А так, оно задаётся вот так:

<meta name="viewport" content="width=1920, initial-scale=1">

Но я могу сейчас, кстати, ошибаться. Этот вариант уже может не работать. Просто я никогда не делал неадаптивных сайтов, ибо я слишком молод. Ну а так, на мобильных это можно сделать (масштабирование под экран).

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...

jafrate, а резиново это верстается так, как и обычно, ширина колонок в процентах от ширины контейнер. Ширина контейнера может иметь максимальную ширину в px или процентах. Классика, короче.

Рустам Байназаров, Ну а как же например текст, он ведь будет выпирать из контейнера, блоки все равно не поместятся в ряд, например, в шапке все очень плотно напихано. За счет того, что контентная часть широкая (в отличие от той же 1170), сжатие блоков происходит уже начиная с 1700. У меня вьюпорт такой:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

jafrate, есть Skype? Очень долго писать просто. Или в мой Telegram напишите, там тоже голос есть, ссылка в профиле.

Рустам Байназаров, lol

Brad9aga, да мне это проговорить проще, чем писать, как, например, тут:
Как правильно работать с PSD макетами под ретиной?

Лень писать трактаты :))

Рустам Байназаров, lol

Brad9aga, если есть желание, ты напиши тут о том, что 1920px — это не самое распространенное разрешение, о том, почему делать тексты на vw плохо, почему ясное дело, что шрифты будут вылезать за границы блоков, потому что для этого придумана адаптивность, что делает тот мета-тег на мобильных устройствах и что он не работает на десктопных версиях браузеров.

Рустам Байназаров, а вот на счет vw далеко не только дело, что он будет вылезать

Brad9aga, да, конечно, это дурь, но у человека нет макетов, кроме 1920 и 320 px. Клёвые нынче дизайнеры.

Так что, если не будет и других макетов, то автору придётся городить костыль, либо придумывать адаптивность за дизайнера.

Рустам Байназаров, Еще раз большое спасибо! Очень понятно все объяснили.

Рустам Байназаров, брать 2 котрольные точки и пдогонять поведение блоков
гемора много но решаемо

jafrate,
Brad9aga, ну, костыль, короче, да. Проблема же, как всегда в текстах.

Рустам Байназаров, тут мне кажется лучше начать с mobile first

Brad9aga, на макет посмотри, mobile :))

Это больше подход к дизайну, чем к вёрстке. Мол, полный функционал должен быть изначально заложен для небольших разрешений, а не наоборот (это включает и дизайн, и расположение элементов, и размеры и т. п.).

В любом случае, макетов под самые популярные разрешения десктопов нет.

Рустам Байназаров, импровизация на ровном месте)

Brad9aga, лично я, как дизайнер, хочу таких дизайнеров увольнять сразу.

Я и дизайнер:

Рустам Байназаров,
в чем прикол

Дмитрий, как можно хвалить макет, у которого нет адаптивности?

Только два разрешения предоставлено: 1920 и 320.

Brad9aga, да я ж откуда знаю :))

Дмитрий, с учётом тех данных, что вы привели, я не распознал оный.

Тогда хорошо. Тогда ладно.

Поеду есть что-нибудь вкусное, работать не хочу.

Рустам Байназаров, из принципа на локалку залил, все нормально,а там это

Brad9aga, это Путин виноват, он же просто не адаптивный.

Дмитрий, Спасибо за комментарий. Дело в том, что у меня раньше, чем с 1024 возникает необходимость перестроения блоков - не помещается функционал в шапке, вылезают за пределы контейнера тексты. Шапка так уже с 1700 не желает помещаться )