Как верстать адаптивно с макетом 1920 px на ноутбуки?

Question

[alabs]

Добрый день.
Мне на верстку присылают макеты 1920px шириной. Верстаю адаптивно, почти пиксель в пиксель. Но клиенты, при просмотре на ноутбуке, говорят, что все очень крупно. Как вы верстаете? Неужели пропорционально уменьшаете высоту и шрифты под каждое разрешение? Как высчитываете?

Comments

[sergey]

используйте media queries

[Ankhena]

Верстаю адаптивно, почти пиксель в пиксель.

Так тогда вопрос не к вам, а к дизайнеру. А еще лучше к самому клиенту, который принял макет и передал его в верстку, а теперь ему стало "крупно". Принял не открывая на своем же ноутбуке? Молодец :)
Если вы выступаете как чистый верстальщик, то ваше дело сверстать, что дали.

Неужели пропорционально уменьшаете высоту и шрифты под каждое разрешение?

Шрифты чаще увеличиваются при уменьшении размера девайса.

Answer 1

[iBird Rose]

https://habrahabr.ru/post/310186/
https://jsfiddle.net/xakxa7w5/

Answer 2

[dom1n1k]

Минуточку. Вот говоришь "верстаю адаптивно, почти пиксель в пиксель" - пиксель в пиксель с чем?
Если есть ноутбучный, паншетный, телефонный макеты и с ними все совпадает - какие вопросы?
Если дополнительных макетов нет - строго говоря, это не проблема верстальщика, это проблема дизайнера. Чистый верстальщик не должен придумывать адаптивность, он её только реализовывает.

Ну а если говорить чисто технически - да, размер шрифта адаптируется тоже. Можно по формуле через calc(в соседнем ответе ссылку дали), можно просто как набор из 4-5 статически заданных размеров через медиа-запросы. Оба подхода имеют свои плюсы и минусы.

Comments

[alabs]

У нас провинция, тут не рисуют по несколько макетов. :) И если и рисовать, то какие разрешения? Ладно размер шрифта, но размер всех блоков, маргины, паддинги, тоже вычислять? Будет ли через calc это все хорошо? Или просто учитывать все размеры в медиа?

[dom1n1k]

Рисовать столько, сколько нужно :) Тут нет единого рецепта. Зависит от контента, лейаута и бюджета, конечно. Если бюджет позволяет, то желательно 4 шт - телефон, планшет, ноут/малый десктоп, большой десктоп.
По поводу марджинов - там тоже возможны варианты. И да, их тоже можно вычислять. А как думал, в сказку попал что ли? :)

Вообще, хочу сказать, что адаптивность многими понимается довольно примитивно. Типа, написал пару медиа-запросов, пару колонок в столбик перестроил - опа, вот сайт и адаптивный.
Хорошая, качественная, продуманная в деталях адаптивность - это сложно и долго. По моим личным впечатлениям, это где-то в три раза дольше, чем сверстать простой резиновый лейаут (резиновый - это который тупо тянется в ширину, но никак не перестраивается).