> Source: https://meetrix.io/blogs/responsive-web-design-elements/ > Markdown copy of that page. Cite the URL above, not this file. Development # Components of Responsive Web Design: Elements, Sizes and CSS [By Hiruna Kumara](https://meetrix.io/blogs/authors/hiruna-kumara/) • September 15, 2026 • 6 min read Responsive web design means one page that works at every screen size, instead of a separate mobile site. The idea is old. The toolkit is not: when our original article on this was written in 2019, container queries and `clamp()` were not usable yet, and layouts leaned on three fixed breakpoints. Here is what a responsive page is made of today, component by component. ## What the components of responsive web design include Seven pieces do the work. Each one is independent of the others, and a page that skips any of them fails in its own predictable way. | Component | What it does | Main CSS or HTML | | --- | --- | --- | | Viewport | Makes mobile browsers use the real screen width | `` | | Fluid layout | Columns that grow, shrink and wrap | Flexbox, Grid | | Flexible media | Images and video that fit and load the right size | `max-width`, `srcset`, `sizes` | | Media queries | Change layout at viewport widths | `@media` | | Container queries | Change a component based on its own space | `@container` | | Relative units | Sizes that scale with text and screen | `rem`, `%`, `vw`, `clamp()` | | Touch targets | Controls you can hit with a finger | Sizing and spacing | ## 1\. The viewport meta tag The smallest component and the one that makes every other one work: ```html ``` Without it, a phone pretends to be a roughly 980-pixel-wide desktop, renders your page at that width and zooms out. Your media queries never match, and everything looks tiny. [MDN's viewport reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element) lists every value the tag accepts. Don't add `maximum-scale=1` or `user-scalable=no`; blocking zoom is an accessibility failure. ## 2\. Fluid layouts The old answer was percentage-width floats. Today it is Grid and Flexbox, and a lot of layouts no longer need a single media query. This grid fits as many 250-pixel columns as it can and stretches them to fill the row: ```css .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.5rem; } ``` The `min(250px, 100%)` part stops the columns forcing horizontal scrolling on screens narrower than 250 pixels. Flexbox handles one-dimensional rows that should wrap: ```css .toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; } ``` One trap in both: flex and grid items refuse to shrink below their content width by default, so long words or file names blow layouts open. [Truncating text with CSS](https://meetrix.io/blogs/css-three-dots-text-overflow/) explains the `min-width: 0` fix. ## 3\. Flexible images and other responsive elements Two separate problems. First, don't let images overflow their container: ```css img, video { max-width: 100%; height: auto; } ``` Second, don't send a 2400-pixel image to a phone. Give the browser options and let it choose: ```html Dashboard showing meeting statistics ``` The `width` and `height` attributes matter even though CSS resizes the image. They let the browser reserve the right space before the file loads, so the page doesn't jump around. Leave `loading="lazy"` off the main image at the top of the page, where it would delay the most important paint. ## 4\. Media queries Media queries switch styles at viewport sizes. Write mobile styles first, then add wider layouts with `min-width`: ```css .page { display: grid; gap: 2rem; } @media (min-width: 48rem) { .page { grid-template-columns: 16rem 1fr; } } ``` Pick breakpoints where _your content_ breaks, not at iPhone or iPad widths. Using `rem` for breakpoints means the layout also adapts when a user increases their default font size. Media queries also cover more than width: `prefers-reduced-motion`, `prefers-color-scheme` and `(hover: hover)` are all part of responding to the device. ## 5\. Container queries The component our 2019 article could not include. A container query styles an element based on the space its container gives it, not the whole viewport. The same card can sit in a narrow sidebar and a wide main column and lay itself out correctly in both: ```css .card-wrapper { container-type: inline-size; } .card { display: grid; gap: 1rem; } @container (min-width: 30rem) { .card { grid-template-columns: 10rem 1fr; } } ``` Container queries have been supported across all major browsers since 2023, and [MDN's container queries guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) covers the query units that come with them. For design systems and component libraries they are now the better default than media queries. ## 6\. Relative units and fluid type | Unit | Relative to | Use for | | --- | --- | --- | | `rem` | Root font size | Font sizes, spacing, breakpoints | | `em` | The element's font size | Padding that scales with a component's text | | `%` | The parent | Widths inside a container | | `vw`, `vh` | The viewport | Full-screen sections, part of fluid type | | `dvh` | Dynamic viewport height | Full-height mobile layouts where toolbars appear and disappear | | `ch` | Width of the "0" character | Readable line lengths | `clamp()` combines them into type that scales smoothly with no breakpoints at all: ```css h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); } .article { max-width: 70ch; } ``` The heading is never smaller than 1.75rem or larger than 3rem, and grows with the screen in between. Keep a `rem` term in the middle value; pure `vw` font sizes ignore the user's zoom setting. ## 7\. Touch targets A layout that fits on a phone can still be unusable if the controls are too small to tap. [WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) sets a minimum target size of 24 by 24 CSS pixels, and platform guidelines recommend larger, around 44 to 48 pixels, for main controls. You can grow the tappable area without making the icon bigger: ```css .icon-button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; } ``` Test on a real phone Browser device emulation is good for layout, but it doesn't reproduce touch accuracy, the on-screen keyboard covering form fields, or a slow mobile CPU. Before shipping, open the page on an actual phone and try to complete the main task with one thumb. Responsive design matters most in apps people use under pressure, like joining a video call from a phone at the last minute. [Customizing the Jitsi Meet front end](https://meetrix.io/blogs/customize-jitsi-meet-frontend/) shows where those layouts live in a real conferencing app, and [the Jitsi IFrame API](https://meetrix.io/blogs/jitsi-api-iframe/) covers embedding a meeting inside your own responsive page. ## 8\. Responsive web design sizes and max-width There is no official list of responsive sizes, and chasing device dimensions is a losing game. What helps is a small set of bands to sanity-check a layout in, plus a cap on how wide the content is ever allowed to get. | Band | Typical width | What usually changes | | --- | --- | --- | | Small phone | 320 to 430px | Single column, stacked navigation | | Large phone | 430 to 600px | Two small cards per row | | Tablet | 600 to 1024px | Sidebar appears, menu expands | | Laptop | 1024 to 1440px | Full multi-column layout | | Wide desktop | 1440px and up | Container stops growing | ### Responsive web design max width Without a cap, a page on a 32-inch monitor stretches paragraphs to 200 characters a line and nobody reads them. Two caps handle it: ```css .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; } .prose { max-width: 65ch; } ``` The outer cap keeps the layout from sprawling, and the `ch` cap holds text at a readable line length whatever the font size. Google's [responsive web design basics](https://web.dev/articles/responsive-web-design-basics) covers the same ground from the viewport side. ## Frequently Asked Questions What are the main components of responsive web design? The viewport meta tag, fluid layouts built with flexbox or grid, flexible images and media, media queries, and relative units. Modern responsive design adds container queries, fluid typography with clamp(), and touch-friendly target sizes. What breakpoints should I use? Set breakpoints where your content breaks, not at device widths. Shrink the browser until the layout looks wrong, and add a breakpoint there. Device sizes change every year; the width at which your navigation stops fitting does not. What is the difference between media queries and container queries? A media query responds to the size of the viewport. A container query responds to the size of the element's container. Container queries make components reusable: a card can switch to a horizontal layout whenever its column is wide enough, wherever it is placed. Do I still need the viewport meta tag? Yes. Without it, mobile browsers render the page at a desktop width and scale it down, and your media queries never match. Every responsive page needs . How big should buttons be on mobile? WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, with spacing exceptions. Apple and Google both recommend larger targets, around 44 to 48 pixels, for primary controls. Make the tappable area large even if the visible icon is small. What screen sizes should responsive web design support? Design for ranges, not devices. The usual bands are under 480 pixels for phones, 600 to 1024 for tablets, and 1280 and up for desktops. Treat them as a sanity check, and set your real breakpoints where your own layout breaks. What max-width should a responsive website use? Most sites cap the main container between 1100 and 1400 pixels so lines do not stretch across wide monitors. For body text, a max-width of 60 to 75 characters reads better than any pixel value. Meetrix Store Pre-configured open source images for AWS and Google Cloud. [Browse products](https://meetrix.io/store/) Meetrix Store New One-click deploys on AWS and Google Cloud. - [Jitsi Meet Self-hosted video calls for 50 to 500 users](https://meetrix.io/store/jitsi-meet/) - [RustDesk Remote desktop AMI, a TeamViewer alternative](https://meetrix.io/store/rustdesk/) - [Coturn TURN/STUN for WebRTC, no per-minute relay fees](https://meetrix.io/store/coturn/) - [Supabase Postgres, Auth, Storage and Realtime, self-hosted](https://meetrix.io/store/supabase/) - [OpenVPN Encrypted remote access, no per-user fees](https://meetrix.io/store/openvpn/) - [Plane Issues, cycles and roadmaps, a Jira alternative](https://meetrix.io/store/plane/) [Browse all products](https://meetrix.io/store/)