Media queries are the key to making responsive CSS styles. In this video, take a closer look at how media queries work.
- [Narrator] To create responsive designs, use media queries…to add conditions for applying specific CSS styles.…With media queries, we'll be able to apply logic like,…when the browser viewport is wider than a thousand pixels,…apply this CSS.…If these conditions aren't met, the styles are ignored.…A media query consists of two components:…a media type and a media feature.…Media types refer to various devices…which can display HTML documents.…
Print matches to printers and other print-related displays…like a web browser showing the page in print preview.…Speech matches screen readers,…and screen matches all devices that are not print or speech.…And all matches all devices.…If you don't specify a type, it will default to all.…Media features look similar to CSS properties syntactically,…but they are actually used to describe the requirements…of the device to apply the styles to.…
They also specify a single feature of the device,…such as width, height, device orientation,…and a whole lot more.…Here's a full list on the code drop site.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.