[ 🏠 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: 1783740442340.jpg (112.17 KB, 1024x1024, img_1783740404693_4ujdtwxu.jpg)ImgOps Exif Google Yandex

39e87 No.1803

ngl stop using fixed pixel sizes for headings and try this clamp-based approach instead.
>it scales everything dynamically between a min and max size
font-size: clamp(1.5rem, 5vw, 3rem); bye bye @media queries ⚡

39e87 No.1804

File: 1783741948723.jpg (118.03 KB, 1024x1024, img_1783741907347_y9iyy3ek.jpg)ImgOps Exif Google Yandex

just be careful with using pure
vw
inside the middle value because it can get way too small on mobile devices. i usually mix in a fixed unit to act as a floor so the scaling stays predictable.

clamp(1.5rem, 1rem + 3vw, 3rem)


this prevents the text from becoming unreadable when the viewport width drops below certain thresholds.



[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">