Комментарии 21
Хорошая статья
ИДЕЯ выглядит интересной.
есть ли примеры реализации?
Очень верно подмечено, что подход на данный момент является идеей, которой хотелось поделиться.
В моей практике его применить на 100% пока не было возможности в связи с устоявшимися вариантами технической реализации и внутренними процессами. Но, как только получится продемонстрировать его применение на реальном примере, обязательно поделюсь этим дополнительно!
Будет интересно, если кто-то из читателей сможет рассказать о своем опыте работы в реализации адаптивного веб-дизайна по схожему подходу.
А что насчёт какого-нибудь pet-проекта в формате proof-of-concept? Было бы интересно ознакомиться.
Могу предположить, что ваша идея упирается в обычный "стакан". Большие порталы, зарабатывающие компаниям деньги как правило имеют ограничение по ширине и классический SS будет приоритетным. Пожалуй добавляю ещё что рескейлинг вещь опасная и в различных браузерах будет различное качество увеличенных элементов (эффекты ряби текста и плавание бордеров и тд, я уж молчу про качество растровой графики (тут придется или добавлять на сервер множество вариантов или пострадает скорость загрузки). Я это все к тому, что очень мало где в бизнесе это в принципе возможно реализовать, да и зачем. Ни разу не хотел хейтить ваш подход, возможно отзыв излишни негативный.
Уже давно многие сайты и фреймворки так умеют.
Не знаю подойдет ли к вашей идее, но можно еще так: на html задаем размер шрифта, а дальше вместо пикселей используем rem. С помощью медиа запросов контролируем размер шрифта. Так можно добиться одинакового вида (в основном) на десктопах
Извините, конечно, но это база. И выдавать ее как свою разработку очень странно.
Часть описанных подходов, такие как Responsive и Adaptive design, действительно часто применяется в адаптивном веб-дизайне.
Однако, если вы можете поделиться примерами веб-интерфейсов, где используется масштабирование всех элементов на определенных breakpoints с последующим сохранением отзывчивой верстки (растягивания элементов), как это предполагается в описанном выше подходе, то буду благодарен. Интересно посмотреть на то, как это реализовано!)
Единицы VW и VH делают именно то что вам нужно
Возможно их тоже можно попробовать применить, однако VW и VH выстраивают размеры исходя из % вьюпорта.
В подходе же предполагается, что масштабирование происходит именно на определенных breakpoints на величину scale-фактора, и далее при изменении ширины на определенно промежутке значений разрешения экрана адаптируется без масштабирования по принципам респонсивного дизайна.
breakpoints это путь к бесконечной отладке, дизайн может ими где-то ограничиваться на максимальной и минимальной ширине, но использовать их где-то в середине размера., это если только совсем никак по другому. С container queries все куда гибче.
Вы отлаживаете блок, с которым работаете, а не в целом с сайт, где то и дело что-то уезжает.
После отладки блока уже оперируете брейкпоинтами исключительно лейаут, а внутри ваши контейнеры уже знают свое дело.
Нет, автор clamp() ищет
А чтобы было ещё гибче, данный подход или комбинацию подходов можно использовать не для сайта целиком, а для каждого отдельного блока.
Супер, спасибо
То что вы называете отзывчивым дизайном, на самом деле резиновый (в западном мире fluid). То, что вы называете адаптивом, на самом деле отзывчивый. Не путайте терминологию, ей и так трудно живется.
Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)