CSS Responsive Design
6 lessonsAbout 36 minutesAdvanced
This part of the CSS Tutorial runs from CSS Media Queries through to Feature Queries. There are 6 lessons here, and working through them takes about 36 minutes at a steady pace.
It follows on from CSS Animations & Transitions, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS Media QueriesCSS Media Queries are used to apply different styles based on device type, screen size, resolution, or orientation.
- 2Responsive LayoutA Responsive Layout is a web page layout that automatically adjusts to different screen sizes and devices.
- 3Mobile First DesignMobile First Design is a web development approach where a website is designed and developed for mobile devices first, then progressively enhanced for larger screens.
- 4Container QueriesAdapt a component to the space provided by its container instead of the size of the viewport. You will establish named query containers, write size and style queries, use container-relative units, and decide when media queries remain appropriate.
- 5Preference Media QueriesRespect motion, contrast, color-scheme, transparency, and input preferences exposed by the user agent. The examples respond to reduced motion, increased contrast, color schemes, transparency, hover capability, and coarse or fine pointers.
- 6Feature QueriesApply progressive enhancements only when the browser understands a required CSS declaration or selector. It covers declaration queries, selector queries, combined conditions, progressive enhancement, and the limits of syntax-based support detection.