Как сделать только из psd макета для desktop molile responsive сайт?

Question

[AbaGardon]

Всем привет!

Сейчас прислали макет, нарисован макет для desktop версии, для мобильной нету, сказали как хочешь так и делай.

Возникли проблемы при решении этой задачи а именно, с шрифтами и отступами, далее распишу подробнее.

ШРИФТЫ - Есть шрифты которые нормально подходят для мобильной версии и для больших экранов тоже. Но проблема возникает тогда когда шрифт очень большой, например, 65px и тогда уже в маленький экран (320 px) это все выглядит не очень. Вопрос в том что как правильно уменьшить шрифт чтобы пропорции соблюдались ? Могу просто разделить на 2 или на 3, но хотел бы узнать то, как это делается правильнее от опытных людей.

ОТСТУПЫ - Такая же проблема возникла у меня с отступами, как правильнее всего их переносить с макетов предназначенных для больших экранов для экранов предназначенных для маленьких экранов (320px например).

Answer 1

[Дмитрий Дарт]

когда шрифт очень большой, например, 65px и тогда уже в маленький экран (320 px) это все выглядит не очень

Первый вариант - верстать не в пикселях, а в REM
Второй вариант - делать media-запросы где делать шрифт, например 20px вместо 65

Такая же проблема возникла у меня с отступами

То же решение применяйте с отступами.

В жизни небольшие заказчики обычно всегда делают 1 PSD-макет т.к. цена, цена... верстальщик всегда делает моб. версию на своё усмотрение. Крупные конторы, конечно, могут позволить себе много дизайнов.

Конечно, и у rem есть недостатки, вот хорошая статья REM vs EM – Великий спор

Comments

[AbaGardon]

1 вариант не совсем понятно как поможет.
2 вариант примерно понятно, а как Вы сами такие сайты разрабатывайте, если конечно Вы этим занимайтесь.

[Дмитрий Дарт]

AbaGardon, Сделайте надпись размером 3-4 REM и подгоните точно такую-же в пикселях, потом переключитесь в адаптивный режим просмотра и увидите как поможет. Будет лучше, но иногда не идеально.

Я делаю с media для больших экранов 3rem, для маленьких 2,5rem обычно.

[AbaGardon]

Дмитрий Дарт, отступы тоже в rem, и root сколько 14 или 16px ?

[Дмитрий Дарт]

AbaGardon, оступы обычно 1-4 подбираю, в зависимости от того, на сколько большой нужен отступ

[AbaGardon]

Дмитрий Дарт, а корневой размер шрифта сколько 14 или 16px ?

[Дмитрий Дарт]

AbaGardon, обычно 16 если вы не меняли его сами или не подключали что-то типа reset или normalize

Answer 2

[Юпитер Макс]

Да не нужно особо заморачиваться! Просто делайте на медиазапросах так, чтобы все корректно отображалось. Как правило используют такие параметры

от ПРОИЗВОЛЬНО до 1170px
от 1169px до 992px
от 991px до 768px
от 767 до 479px
от 478px до "как правило 320px"

но и эти параметры можно не все брать, смотря какой макет.