Как этот макет адаптировать под мобильные устройства?

Question

[Максим Раменский]

Поделитесь опытом. Что то я не могу продвинуться в работе.
Пример страницы:


Я указываю

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Сложность заключается в том, что макет сделан под разрешение 750px. И не понимаю как его адаптировать под разрешение 320px?
Т.е. все вроде бы должно пропорционально уменьшаться когда max-width: 750px.
Какие размеры устанавливать для шрифтов? Ведь если брать из макета, тогда некоторые элементы не помещаются.

Вот конкретно в шапке: кнопка меню логотип и инфо пользователя не помещаются в 320px. Уменьшать логотип, кнопку и размеры имени?
Тогда и сайд бар должен уменьшаться. Возникает другой вопрос, как сделать иконки адаптивными? Для img понятно max-width. А для спрайтов?

Answer 1

[WhiteSama]

Под адаптив надо использывать медиа запросы. И будет не пропорциально изменяться, а ступенчато. Шрифты через медиа запросы, либо процентами или скриптами (можно указать размеры в em, и увеличивать em у body), картинки %, но лучше использовать свг. Со спрайтми тоже не сложно, просто указывает позицию в процентах (есть полно примеров).

Answer 2

[Максим Раменский]

А правильно ли использоватьhtml {transform: scale(); }? Т.е. Когда меньше 750px все зумиться. Ведь по сути я же этого и буду добавиться с уменьшением шрифтов картинок и прочего.

Comments

[Anton Filippov]

нет

[Максим Раменский]

Антон Ф.: А можете пояснить почему нет?

[Anton Filippov]

Максим Раменский: потому что на мобильных устройствах не нужно уменьшать весь текст, местами наоборот лучше увеличивать для читаемости.
Да и вообще, масштабирование всего и сразу не является адаптивной версткой