Responsive design
A responsive layout adapts instead of breaking. The terms here cover the tools for it: media queries, breakpoints, fluid sizing and container queries.
Not yet reviewedLevel
Terms
- BeginnerResponsive designResponsive design makes a layout adapt to the screen it is on, instead of building a separate site for each device.Not yet reviewed
- BeginnerMobile firstMobile first means writing the small screen styles as the default and adding larger screen styles on top with min-width queries.Not yet reviewed
- BeginnerMedia queriesA media query applies styles only when a condition is true, such as the viewport being at least 768px wide or the user preferring dark mode.Not yet reviewed
- BeginnerBreakpointsBreakpoints are the screen widths where the layout changes, such as 640px, 768px and 1024px.Not yet reviewed
- Intermediateclamp() and fluid sizingThe clamp() function sets a value with a minimum, a preferred size and a maximum, so type and spacing scale smoothly between screen sizes.Not yet reviewed
- IntermediateContainer queriesContainer queries style a component based on the size of its container instead of the whole screen.Not yet reviewed
Courses
Learn Responsive Design
A course that covers media queries, layouts, images, typography and theming for responsive pages.
Know more about Responsive design?
Suggest a term, a change, or a resource. No account needed.
Suggest a change