Как делать масштабируемую HTML-верстку?
Есть сайт, на котором при увеличении или уменьшении масштаба страницы или ее разрешения верстка остается такой же, просто уменьшаются элементы сайта пропорционально разрешению страницы.
Как делается такая верстка? Какие темы нужно изучить для того, чтобы верстать такие макеты?
Ответы (2 шт):
Автор решения: EkaterinaRatatui
→ Ссылка
- делать при помощи vw - использовать формулу calc(100vw * исходный размер/разрешение макета). То есть например у вас есть макет на 1440px и только, есть элемент с высотой 100px. Вы пишите height: calc(100vw * 100/1440) и у вас пропорционально будет увеличиваться/уменьшатся элементы. И получается на мобильном уст-ве у вас будет мини версия десктопа. По вопросу я подразумеваю вы это имели виду?
если же не это имели виду, то :
- Медиа запросы. Советую начинать с mobile first делать, что бы повысить скорость отображения у смартфонов @media (min-width: 768px) || @media (max-width: 1023px)