# Media Queries Media Queries are a CSS mechanism for testing user-agent or display-device features and conditionally applying styles, with syntax and features defined by the Media Queries specification. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Stop Treating CSS Container Queries Like Traditional Media Queries DevFeed: [Stop Treating CSS Container Queries Like Traditional Media Queries]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Victor Ayomipo) Published: 2026-09-16T13:00:00Z Content type: article Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [container](), [CSS](), [Media Queries](), [Responsive Design]() Tags: [container](), [css](), [responsive-design](), [techniques]() ### AI overview This article explains why CSS container queries should not be treated as equivalent to traditional media queries. It discusses their differing purposes, focuses on container size queries, and describes how they allow reusable components to respond to the size of their surrounding container. ### Source excerpt Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood. Let's look at how they differ from media queries, when to reach for each, and how container queries help reusable components respond naturally to the contexts in which they appear. - CSS - Tools - Techniques ## Modern CSS theming with light-dark(), contrast-color(), and style queries DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries]() Original publisher: [Read original article]() Published: 2026-06-22T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [color](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [dynamic-theming](), [media](), [scheme](), [support](), [themes]() ### AI overview This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme. ### Source excerpt Combine three new CSS features to build fully adaptive themed components. ## Automated accessible text with contrast-color() DevFeed: [Automated accessible text with contrast-color()]() Original publisher: [Read original article]() Published: 2026-03-12T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [Web Development](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [design-system]() ### AI overview The article explains how CSS contrast-color() can automatically choose the higher-contrast text color for a given background. It covers its contrast-ratio behavior, use in design-system buttons, dark mode, hover states, and algorithmically generated color palettes. ### Source excerpt Let the browser pick the most readable text color for any background with this new CSS function. ## Change font-weight based on the user's screen DPI DevFeed: [Change font-weight based on the user's screen DPI]() Original publisher: [Read original article]() Author: Stanko Published: 2025-02-03T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Font](), [CSS](), [Media Queries](), [pixel](), [User Experience](), [Web Development]() Tags: [accessibility](), [browser](), [css](), [fonts](), [pixel](), [user-experience]() ### AI overview This tutorial explains that thin font weights can become blurry and difficult to read on low-DPI screens. It demonstrates progressive enhancement with CSS media queries: use a more readable default weight for low-DPI displays and apply a thinner weight on high-DPI displays. The technique can also be applied to font size and icon line width. ### Source excerpt A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI screens. One common issue I noticed is that thin font weights can be hard to read on low-DPI screens. Since there are fewer pixels to render details, fine lines can appear blurry due to anti-aliasing. Here is an example of the same text rendered on two screens with different device pixel ratios. At the top is a hi-DPI screen (with a pixel ratio of 2), and below is a low-DPI screen (with a pixel ratio of 1). The font used is Inter, 24px tall, with a font weight of 100. This problem is a great example of how we can use progressive enhancement to improve the user experience. We'll set a default font weight that is readable on low-DPI screens, then use CSS media queries to target hi-DPI screens and apply thinner fonts. Here is a code example: // Default font weight for low-DPI screens h1 { font-weight: 300; } // Progressive enhancement for hi-DPI screens // Making font thinner and more elegant @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { h1 { font-weight: 100; } } This will set the font weight to 300 on low-DPI screens and 100 on hi-DPI screens. Feel free to adjust these values as needed. Additional applications # This is an example using font weight, but you can apply the same technique to other properties, such as font size or icon line width. Simulating low-DPI on Mac # This is a great tip from StackOverflow: Open System Settings > Accessibility > Zoom > Advanced > Uncheck "Smooth Images" Zoom out your browser to 50% Turn on the system Zoom (the default shortcut is Option + ⌘ + 8) This should give you a good idea of how your website appears on a low DPI screen. Sorry, Windows and Linux users! If you have a good solution for your system, please open a GitHub issue, and I'll add it here. ## Getting started with CSS container queries DevFeed: [Getting started with CSS container queries]() Original publisher: [Read original article]() Author: michelle-barker Published: 2023-11-16T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [CSS](), [Media Queries](), [Web Development]() Tags: [article](), [building](), [css](), [getting-started](), [layout]() ### AI overview This tutorial introduces CSS container queries and explains how they can create more robust, flexible layouts. Using a news feed as an example, it compares querying a container's size with querying the viewport through media queries, showing how container queries can reduce component complexity and respond better to changing available space. ### Source excerpt CSS container queries are a powerful new tool for our CSS layout toolbox. In this post we'll dive into the practicalities of building a layout with container queries. ## MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps DevFeed: [MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps]() Original publisher: [Read original article]() Author: dipika-bhattacharya Published: 2023-06-13T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Web Development](), [selectors](), [Media Queries](), [Web platform](), [webgpu](), [ECMAScript]() Tags: [apis](), [css](), [firefox](), [javascript](), [media](), [selectors](), [web](), [webgpu]() ### AI overview MDN highlights documentation updates covering CSS selector syntax, expanded CSS media-query support, WebGPU and WebTransport APIs, ECMAScript modules, and progressive web apps. The article also notes browser-specific support, including new or experimental features in Firefox and Safari. ### Source excerpt Discover CSS :lang(), experimental media queries, manipulating graphics with WebGPU, client-server communication with WebTransport, ECMAScript module support, and more. ## Mobile-First CSS: Is It Time for a Rethink? DevFeed: [Mobile-First CSS: Is It Time for a Rethink?]() Original publisher: [Read original article]() Author: by Patrick Clancey Published: 2022-06-09T02:13:10Z Content type: article Language: en Sources: [A List Apart: The Full Feed]() Topics: [CSS](), [Media Queries](), [Mobile](), [Web Development](), [how to create smooth CSS transitions]() Tags: [code](), [code-css](), [complexity](), [css](), [development](), [devices](), [mobile](), [testing](), [visual-design]() ### AI overview The article examines whether mobile-first CSS remains appropriate for every project. It explains that starting with mobile styles and overriding them at larger min-width media-query breakpoints can create complexity, inefficiency, increased testing effort, and harder-to-maintain code. It also outlines benefits such as a clear development hierarchy, prioritization of mobile user journeys, and avoidance of desktop-centric development. ### Source excerpt The mobile-first design methodology is great--it focuses on what really matters to the user, it's well-practiced, and it's been a common design pattern for years. So developing your CSS mobile-first should also be great, too...right? Well, not necessarily. Classic mobile-first CSS development is based on the principle of overwriting style declarations: you begin your CSS with default style declarations, and overwrite and/or add new styles as you add breakpoints with min-width media queries for larger viewports (for a good overview see "What is Mobile First CSS and Why Does It Rock?"). But all those exceptions create complexity and inefficiency, which in turn can lead to an increased testing effort and a code base that's harder to maintain. Admit it--how many of us willingly want that? On your own projects, mobile-first CSS may yet be the best tool for the job, but first you need to evaluate just how appropriate it is in light of the visual design and user interactions you're working on. To help you get started, here's how I go about tackling the factors you need to watch for, and I'll discuss some alternate solutions if mobile-first doesn't seem to suit your project. Advantages of mobile-first Some of the things to like with mobile-first CSS development--and why it's been the de facto development methodology for so long--make a lot of sense: Development hierarchy. One thing you undoubtedly get from mobile-first is a nice development hierarchy--you just focus on the mobile view and get developing. Tried and tested. It's a tried and tested methodology that's worked for years for a reason: it solves a problem really well. Prioritizes the mobile view. The mobile view is the simplest and arguably the most important, as it encompasses all the key user journeys, and often accounts for a higher proportion of user visits (depending on the project). Prevents desktop-centric development. As development is done using desktop computers, it can be tempting to initially focus on the desk ## A blog redesign and an exploratory Rust multiplayer game project DevFeed: [A blog redesign and an exploratory Rust multiplayer game project]() Original publisher: [Read original article]() Author: {"image"=\>"rj-headshot.jpg", "greetings"=\>nil} Published: 2021-07-29T05:00:00Z Content type: opinion Language: en Sources: [Richard Jones]() Topics: [border-image](), [Media Queries](), [Rust](), [WebAssembly](), [Web Development](), [WebRTC](), [Bevy](), [render]() Tags: [bevy](), [css](), [life](), [mobile](), [mobile-web](), [render](), [rust](), [wasm](), [webassembly](), [webrtc]() ### AI overview The author describes updating the blog with responsive CSS and migrating comments to GitHub issue comments while experimenting with a browser-based multiplayer game in Rust, WebAssembly, WebRTC, and Bevy. ### Source excerpt I have dragged my blog, kicking and screaming, into the era of media-queries and responsive CSS. So now it's readable on a variety of screen sizes. My first post was roughly the same year the iPhone 3G came out I think, and the mobile web wasn't really a big deal back then. ## Customizing Themes Of Codename One Apps DevFeed: [Customizing Themes Of Codename One Apps]() Original publisher: [Read original article]() Author: Steve Hannah Published: 2021-03-15T00:00:00Z Content type: tutorial Language: en Sources: [CodeName One]() Topics: [CSS](), [Media Queries](), [App]() Tags: [android](), [apps](), [css](), [desktop](), [devices](), [ios](), [platforms](), [windows]() ### AI overview A tutorial presenting recipes for customizing the look and feel of Codename One apps with themes, CSS, and styles. It explains using media queries to target platforms, devices, and display densities, and describes platform-specific font scaling. ### Source excerpt Recipes to customize the look and feel of Codename One apps using Themes, CSS, Styles, etc. ## Measuring Your Site's Responsive Breakpoint Usage DevFeed: [Measuring Your Site's Responsive Breakpoint Usage]() Original publisher: [Read original article]() Published: 2014-12-23T06:38:36Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [Responsive Design](), [Media Queries](), [Google Analytics](), [Website]() Tags: [analytics](), [google-analytics](), [properties](), [responsive-design](), [web]() ### AI overview This tutorial explains why responsive sites should measure breakpoint usage in addition to device usage. It describes using custom dimensions and metrics in Google Analytics to track breakpoint-related user data, with concepts and code samples intended to apply to other analytics platforms as well. ### Source excerpt Most web analytics tools will give you a lot of information about your users' devices. These insights can be extremely useful for measuring trends and are particularly important if you have a separate mobile and desktop site or a different design for Android and iOS. But if you've built your site responsively, device information just doesn't tell the whole story. ## Media Queries 4 and Responsive Design Beyond Browser Size DevFeed: [Media Queries 4 and Responsive Design Beyond Browser Size]() Original publisher: [Read original article]() Published: 2014-10-16T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [Media Queries](), [Responsive Design](), [web design](), [W3C](), [browser]() Tags: [browser](), [deprecated](), [design](), [responsive-design](), [w3c](), [web]() ### AI overview This article reviews media query capabilities, including media types and expressions for different devices, and argues that responsive design can account for factors beyond browser size, such as location, weather, and lighting. ### Source excerpt The Media Queries 4 spec brings insight to technological capabilities that are coming up soon (this is based on the Editor's Draft, October 10, 2014). ## Responsive Images with Apropos DevFeed: [Responsive Images with Apropos]() Original publisher: [Read original article]() Author: Square Engineering Published: 2013-08-21T16:03:00Z Content type: article Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Responsive Design](), [CSS](), [Media Queries](), [Sass](), [Front end](), [Open Source](), [Web Development](), [Localization (l10n)]() Tags: [css](), [design](), [devices](), [engineering](), [front-end](), [images](), [javascript](), [open-source](), [responsive-design]() ### AI overview Square's front-end engineering team describes Apropos, a Compass extension for serving responsive image variants based on size, resolution, and localization. It uses CSS media queries to download only the resources needed for a visitor's device and is released as an open-source project. ### Source excerpt A simple way to serve up appropriate images for every visitor.