#MediaQueries
LightNews LightNews
sebastienlorber.com
This Week In React 290:
⚛️
- Suspense
- Working Group
- Next.js
- React Router
- Storybook
- Astryx
📱
- Mediaqueries
- ViewTransition
- Platform.Variant
- Screens
- Nitro
- KeyboardController
- Skia

🍿 Read: thisweekinreact.com/newsletter/290

✍️: @swmansion.com Konrad & Szymon
July 15, 2026 at 2:44 PM
michalski.bsky.social
#css #rwd #mediaqueries
kevinpowell.co Kevin Powell @kevinpowell.co · Nov 22
The range syntax is so much better than min/max width.

Teaching beginners, the amount of times I had to explain "no, the min one is for bigger than, and max if for smaller than" 😅

So happy this is a thing now.
chriscoyier.net Chris Coyier @chriscoyier.net · Nov 21
Tired:
@media (min-width: 500px) { }

Wired:
@media (width >= 500px) { }

Even better when you need to double up like:
@media (500px <= width <= 1000px) { }

Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.

Good article:
cssence.com/2024/superio...
November 22, 2024 at 10:40 AM
lukewarlow.dev
Spec URL: drafts.csswg.org/mediaqueries...
January 6, 2025 at 3:55 PM
lukewarlow.dev
👀 My web preferences API proposal has been upstreamed to CSS media queries draft spec.
drafts.csswg.org/mediaqueries...
Media Queries Level 5
drafts.csswg.org
September 17, 2024 at 5:09 PM
hybrist.dev
Can’t wait for this to land: drafts.csswg.org/mediaqueries... (API for recording user preferences in a way that just works)
Media Queries Level 5
https://drafts.csswg.org/mediaqueries-5/#auto-pref①
August 17, 2025 at 4:30 PM
swresourcesandsupport.com
🕸️ Responsive Web-Design 101
Written by @trinityblair.com

The basics to responsive web-design using media queries and flex-box CSS properties. CodePen's are used for interactive examples. #swresources #responsivedesign #flexbox #codepen #mediaqueries
January 9, 2025 at 2:04 AM
rschristian.dev
Excuse you, I think you'll find he's just my work horse and the credit really belongs to me: bsky.app/profile/pass...

But also indeed: drafts.csswg.org/mediaqueries...
May 12, 2025 at 5:02 AM
inautilo.bsky.social
#Development #Guides
Media queries range syntax · What problem it solves and how to use it today ilo.im/16cnpn by Ahmad Shadeed

_____
#Syntax #RangeQueries #MediaQueries #ResponsiveDesign #Design #WebDesign #WebDev #Frontend #CSS
Media Queries Range Syntax
Table of contents
ilo.im
May 4, 2026 at 4:15 PM
cssence.com
#CSSence #AdventCalendar Day 24

A CodePen that may contain traces of Media Queries Level 5 completes the calendar.

»Media Queries Test Page«
cssence.com/2024/media-q...

#CSS #MediaQueries
Media Queries Test Page
May contain traces of Media Queries Level 5.
cssence.com
December 24, 2024 at 9:26 AM
michalski.bsky.social
#mediaqueries #css
chriscoyier.net Chris Coyier @chriscoyier.net · Nov 21
Tired:
@media (min-width: 500px) { }

Wired:
@media (width >= 500px) { }

Even better when you need to double up like:
@media (500px <= width <= 1000px) { }

Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.

Good article:
cssence.com/2024/superio...
November 22, 2024 at 10:35 AM
quirksmode.org
I forgot I created an entire media query test suite.

Wouldn't be too hard to expand it with a container query test suite.

https://www.quirksmode.org/css/mediaqueries/mobile.html
May 8, 2026 at 10:11 PM
andystew.art
I think you want: drafts.csswg.org/mediaqueries...
Media Queries Level 5
drafts.csswg.org
May 8, 2025 at 12:00 PM
mike.herchel.com
CSS Custom Media!!! Please!!!!!

drafts.csswg.org/mediaqueries...

😄
Media Queries Level 5
drafts.csswg.org
December 19, 2024 at 5:55 PM
frontend.irish
Ever forget media query syntax? I sure do. So I mixed up a little site listing popular blocks to copy. Maybe others will find it useful too.

mediaquery.style

#frontend #css #mediaquery #netlify #nextjs #webdev #mediaqueries #sideproject
Useful media query syntax — mediaquery.style
What was that media query code again? Copy popular media queries at the click of a button and get back to creating!
t.co
August 28, 2023 at 1:09 PM
pablolarah.bsky.social
🟠🟡 Media Queries
Range Syntax
by Ahmad Shadeed @ishadeed.com @shadeed9@front-end.social
#MediaQueries #css #webdev #RangeSyntax

ishadeed.com/article/rang...
White text with orange shadow "Media Queries Range Syntax" on blue background with orange petaled flowers blooming in the field.
May 4, 2026 at 2:59 PM
inautilo.bsky.social
#Development #Outlooks
Media queries might look very different soon · Streamlining media queries with @function and if() ilo.im/16doju by Kevin Powell

_____
#ModernCSS #MediaQueries #CssFunctions #CssIf #Chrome #Browsers #WebDev #Frontend #CSS
Media queries might look very different soon.
Would love to know what you think about this :)
ilo.im
June 11, 2026 at 5:18 PM
ollie-williams.bsky.social
Hoping we get the ability to override prefers-color-scheme via javascript eventually. drafts.csswg.org/mediaqueries....
May 22, 2026 at 12:31 PM
jamie.build
I hope we get some sort of media query for "Differentiate without color"

github.com/w3c/csswg-dr...
[mediaqueries-5] Media query to prefer shapes over colours · Issue #7406 · w3c/csswg-drafts
Thank you for the recent additions of https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast https://d...
github.com
October 16, 2025 at 4:37 PM
bebraw.bsky.social
Now that's interesting.

I found drafts.csswg.org/mediaqueries... but there's no mention of breakpoints.
Media Queries Level 3
drafts.csswg.org
October 21, 2025 at 1:15 PM
zeldman.bsky.social
Make IE 5+, Firefox 1+ and Safari 2 eat media queries + like it. http://code.google.com/p/css3-mediaqueries-js/ #aea
November 26, 2024 at 8:57 AM
brunopulis.mastodon.social.ap.brid.gy
Esse video vale a pena cada minuto

Conteudo de alto valor e traz uma reflexao muito importante, porque em pleno 2025 usar media-queries ainda?

Baita react do Tárcio Zemel e excelente artigo do Camilo Micheletto

https://lnkd.in/eFDK4bcd

#frontend #mediaqueries #css #webstandards
LinkedIn
This link will take you to a page that’s not on LinkedIn
lnkd.in
November 19, 2025 at 6:12 PM
handle.invalid
😎Por que Isso Importa?

Usar media queries é essencial para criar sites que funcionam bem em qualquer lugar. O design responsivo é o futuro, e as mediaqueries são 1 parte super importante disso! 🚀

Vc têm usado media queries em seus projetos? Compartilhem suas dicas e experiências nos comentários! 👇
September 23, 2024 at 2:20 PM
inautilo.bsky.social
#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web ilo.im/16c7es by Amit Sheen

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS
Building a UI Without Breakpoints
This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.
ilo.im
April 16, 2026 at 8:11 AM
patrickbien.bsky.social
Introducing css mediaqueries to my websitedevelopment project for TEAMrace2help. This should improve the overall experience for smartphone users. All changes are uploaded to my github.
January 16, 2024 at 8:25 PM
frontenddogma.com
Dynamic Media/Container Queries Using “if()”, by @css@front-end.social:

https://css-tip.com/dynamic-queries/

#css #conditionals #mediaqueries #containerqueries
Dynamic media/container queries using if()
Use modern CSS to express media queries and container queries differently
css-tip.com
August 25, 2025 at 7:30 PM