Решение есть
Можно заменить размеры шрифтов и элементов. Вместо фиксированных (в пикселях) на относительные (в "vw").
Теория
Например, при разрешении 1920px шрифт размером 12px будет соответствовать размеру 0.63vw (это можно вычислить самому или в онлайн сервисе или в отладчике браузера). При изменении размера экрана, размер шрифта будет пропорционально изменяться. Если размеры остальных элементов изменить на "vw", то можно сделать чтобы всегда было "как в макете" при любом разрешении экрана.
Практика
Как делаю я на примере SASS:
1. Если макетов два (мобильная версия с базовой шириной 320px и десктоп версия с базовой шириной, например, 1920px) я делаю два миксина с брейкпоинтами:
=largeScreen
@media only screen and (min-width: "1919px")
@content
=mobileScreen
@media only screen and (max-width: "767px")
@content
2. Рассчитываем размеры элементов.
Будем сходить из того, что у верстки будет три состояния:
- размер менее 768px
- более 768px но менее 1920px
- более 1920px
Чтобы для каждого размера экрана вычислить соответствующий vw элемента, прописываем в SASS такие функции:
@function large($target)
$vw-context: (1920/1920)
@return ($target * $vw-context) * 1px
@function base($target)
$vw-context: (1920 * .01)
@return ($target/$vw-context) * 1vw
@function mobile($target)
$vw-context: (320 * .01)
@return ($target/$vw-context) * 1vw
Что тут вообще происходит? ))
Разберем функцию "base":
@function base($target) // пиксельный размер элемента, которое мы передаем в функцию
$vw-context: (1920 * .01) // "1920" базовый размер макета десктопной версии, умножаем на "0.01" чтобы получить соотношение 1% экрана(=1vw) к пикселям макета.
@return ($target/$vw-context) * 1vw // возвращаем соотношение размер элемента в "vw"
Аналогично работают остальные функции, за исключением large.
В ней мы возращаем размеры в пикселях. Т.е. используем "классический" способ, когда есть фиксированная контентая часть - все что внутри нее с фиксированными размерами, а вне растягивется по ширине экрана.
В моем примере функции large базовый размер экрана и максимальный совпадают, но вам ничего не маешает задать максимальный размер, например, в 2560px. (тогда в функции вторая строка будет иметь виж $vw-context: (2560/1920) )
3. Прописываем все это в стилях элемента
Например (SASS синтаксис):
.title
font-size: base(12)
+largeScreen
font-size: large(12)
+mobileScreen
font-size: mobile(12)
В CSS мы получим элемент с относительным размером. В трех разных диапозонах.
ВАЖНО! Такой способ подходит, когда нужно просто сделать гибкий лэндинг и у заказчика нет строгого стайл гайда, когда все размеры элементов четко прописаны в документе.
Простой
Простой
