Как делать дизайн-макет для сайта с резиновой версткой?

Для создания дизайн-макета сайта с резиновой вёрсткой рекомендуется:

• Задавать ширину блоков в процентах. dmitrytinitilov.gitbooks.io Проценты считаются от ширины родительского блока. dmitrytinitilov.gitbooks.io Если поместить такой блок внутрь body, то его ширина будет пропорциональна ширине экрана. dmitrytinitilov.gitbooks.io
• Комбинировать элементы резиновой и фиксированной вёрсток. dmitrytinitilov.gitbooks.io Например, в макете голубые полоски могут быть резиновыми и занимать всю ширину экрана, а блок по центру соответствовать фиксированной вёрстке. dmitrytinitilov.gitbooks.io
• Использовать минимальную возможную ширину блока. dmitrytinitilov.gitbooks.io Если задать ширину блока в процентах, то при сжатии окна блок также будет сжиматься. dmitrytinitilov.gitbooks.io Чтобы остановить этот процесс, можно задать минимальную ширину блока. dmitrytinitilov.gitbooks.io
• Пропорционально изменять ширину и высоту блоков. dmitrytinitilov.gitbooks.io Для этого нужно поставить высоту блока 0px, а padding-top равным ширине. dmitrytinitilov.gitbooks.io

Для создания резинового дизайна можно использовать графический редактор Figma, в котором предусмотрены шаблоны для разных разрешений экранов (фреймы). practicum.yandex.ru Достаточно выбрать подходящий и расположить в рабочей области, а сервис сам задаст параметры ширины и высоты. practicum.yandex.ru

Для более подробной консультации по созданию дизайн-макета для сайта с резиновой вёрсткой рекомендуется обратиться к специалисту.