Responsive DesignBreakpoints, units and the approach that needs fewest of them.ComputingMobile-first: base styles for small screens, min-width queries to addcomplexity.Unitsrem — scales with user font sizeem — relative to the parent% — of the containervw / vh — of the viewportch — width of a '0'Common breakpoints640px — large phone768px — tablet1024px — laptop1280px — desktopLayoutclamp(min, preferred, max)minmax() in gridauto-fit for responsive gridsaspect-ratio for mediaDo notSet font sizes in pxAssume touch means smallHide content on mobileDesign for exact device widthsclamp(1rem, 2.5vw, 1.5rem) gives fluid type with a floor and a ceiling —often replacing three media queries.Responsive Designlearnposters.com
Responsive Design — printable computing wall chart from LearnPosters. Free vector PDF, US Letter and A4.

What’s on the Responsive Design poster

17 entries in 4 groups.

Mobile-first: base styles for small screens, min-width queries to add complexity.

clamp(1rem, 2.5vw, 1.5rem) gives fluid type with a floor and a ceiling — often replacing three media queries.

Questions about the Responsive Design poster

What’s on the Responsive Design poster?
17 entries in 4 groups. Mobile-first: base styles for small screens, min-width queries to add complexity. Units: rem — scales with user font size, em — relative to the parent, % — of the cont…; Common breakpoints: 640px — large phone, 768px — tablet, 1024px — laptop, 1280px — de…; Layout: clamp(min, preferred, max), minmax() in grid, auto-fit for responsive grids,…; Do not: Set font sizes in px, Assume touch means small, Hide content on mobile, Desig…. clamp(1rem, 2.5vw, 1.5rem) gives fluid type with a floor and a ceiling — often replacing three media queries.
Who is the Responsive Design poster for?
Responsive Design belongs to the Computing section rather than to a school year, because computing is not something one grade owns. Anyone learning the web can pin it up — a beginner, a student mid-course, or someone revising years later.
When should you use the Responsive Design poster?
Design for the content, not for devices. Add a breakpoint where the layout breaks. A wall chart earns its place by being glanceable from where the work is happening, so Responsive Design belongs on the wall where that computing work actually happens, within glancing distance, rather than filed away.
What other posters go with Responsive Design?
Accessibility, ARIA and How a Browser Renders sit alongside Responsive Design in the Computing section. Printed together they make a wall rather than a single sheet, which is how a reference set actually gets used.AccessibilityARIAHow a Browser Renders
Is the Responsive Design poster free to download and print?
Yes. Responsive Design downloads as a free PDF with no account, no email and no watermark, like everything else in the Computing section. Print as many copies as you like for a home, a classroom, a library or a tutoring group; reselling the file is the only thing the licence rules out.Read the licence
What size does the Responsive Design poster print at?
Responsive Design is a vector PDF laid out for US Letter, and prints on A4 with Fit to page — the same file, no separate download. Because every mark on it is drawn rather than photographed, it stays sharp enlarged to A3, A2 or A1 at a copy shop. Colour carries emphasis only, so a greyscale print of Responsive Design loses nothing.Printing guide

Related posters

Charts that sit alongside Responsive Design on the same wall.

Browse every Computing poster, or start from the full catalogue.