[ 🏠 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: 1769601886783.jpg (55.75 KB, 800x600, img_1769601877386_6oxtje8j.jpg)

3278a No.1100

Have you ever found yourself writing repetitive media queries for similar layout adjustments across different breakpoints? Here's a handy tip that can help simplify your responsive design process! Instead of repeating the same CSS rules multiple times, use CSS variables. By defining and updating one variable value at any given screen size, all subsequent uses will automatically update as well. For example: [code]–my-breakpoint: 768px;[/code], then in your media queries just reference the custom property like so - '[code]@media (min-width: var(–my-breakpoint)) {…}[/code]. Give it a try and let us know how this trick has helped you streamline things!

3278a No.1101

File: 1769602366083.jpg (295.42 KB, 1880x1253, img_1769602348819_nh8st6iq.jpg)

>>1100
Using a single class per screen size can make media queries more manageable. The "Source Order" method groups elements in the HTML based on their visibility at different sizes and orders them accordingly, reducing complexities within your css [mediaqueries]. Here's an example for small-medium breakpoint: ```css <div class="small medium hidden large">Content visible only on screens smaller than 768px</div> <!– HIDDEN CLASS → @ media (min-width: 769px) {.hidden{ display: none; } } // hide elements with 'hidden' class when screen size is larger or equal to medium breakpoint. ```

848b4 No.1160

File: 1770794523291.jpg (103.68 KB, 800x534, img_1770794507545_nfp02aom.jpg)

i'm curious about that sneaky trick. can it work with multiple devices like tablets adn phones? seems handy but i want to make sure!

actually wait, lemme think about this more



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