# Responsive Components: a Solution to the Container Queries Problem

DevFeed: [Responsive Components: a Solution to the Container Queries Problem](<https://devfeed.tech/articles/responsive-components-a-solution-to-the-container-queries-problem-29521.md>)

Original publisher: [Read original article](<https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/>)

Published: 2018-02-27T08:12:12Z

Content type: article

Language: en

Sources: [Philip Walton](<https://devfeed.tech/sources/philip-walton.md>)

Topics: [Responsive Design](<https://devfeed.tech/topics/responsive-design.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web APIs](<https://devfeed.tech/topics/web-apis.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [web design](<https://devfeed.tech/topics/web-design.md>)

Tags: [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [developer](<https://devfeed.tech/tags/developer.md>), [responsive-design](<https://devfeed.tech/tags/responsive-design.md>), [web-apis](<https://devfeed.tech/tags/web-apis.md>), [web-developers](<https://devfeed.tech/tags/web-developers.md>)

## AI overview

This article explains how to build responsive components that adapt to their containing environment without waiting for CSS container queries. It proposes using currently available web APIs as a progressive enhancement, with generic base styles and environment-specific overrides that continue to work when JavaScript or newer browser features are unavailable.

## Source excerpt

Container queries is a proposal that would allow web developers to style DOM elements based on the size of a containing element rather than the size of the browser viewport. If you're a web developer, you've probably heard about container queries before. For about as long as we've had responsive web design, we've had developers asking for them (initially element queries, then changing to container queries).