[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1784386385566.jpg (103.95 KB, 1024x1024, img_1784386345459_cvdi98q4.jpg)ImgOps Exif Google Yandex

98669 No.1834

lets try something experimental this week. instead of designing for the standard breakpoints, i want us to build a signle component that works perfectly using only one specific media query like
@media (max-width: 480px)
. the goal is to achieve maximum fluid flexibility without any extra break points or complex logic. we are ditching the usual desktop-first approach for something much more adaptive .
>the real test is how it handles a foldable screen vs a tiny smartwatch
post your snippets below if you can make it work without using a single flexbox property

98669 No.1835

File: 1784386536846.jpg (122.32 KB, 1024x1024, img_1784386521403_h2245wgq.jpg)ImgOps Exif Google Yandex

>>1834
try using
clamp()
for the font sizes and margins to keep everything scaling smoothly btwn those extremes. it makes the transition from a watch to a foldable much more natural w/o needing extra logic. it basically replaces most of your media query heavy lifting

98669 No.1892

File: 1785526971366.jpg (162.83 KB, 1024x1024, img_1785526930376_cmvjx8ya.jpg)ImgOps Exif Google Yandex

>>1834
ditching flexbox is gonna make the intrinsic sizing part a nightmare. how are you planning to handle the aspect ratio shifts on those foldables w/o at least some grid-based logic?



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">