Media queries can be used to target screen sizes in many ways. In this video, discover how to target for mobile first, desktop first, or a range of screen sizes.
- [Instructor] Width refers to the width of the browser's…visible screen area, or viewport,…including the size of a scroll bar.…In the previous examples, we use the min and max prefixes.…And while you can use just width, it's not very flexible…because the resolution has to be the exact size.…If the resolution goes even one pixel bigger or smaller,…the styles will no longer be applied…because the condition is no longer true.…Sometimes when you're mixing max and min widths,…you may end up targeting the same resolution.…
You may need to add a style that says,…when the screen is 768 pixels or smaller, add this style.…And when the screen is 768 or bigger, add this style.…In this example, both blocks are targeting 768.…So the declaration that comes after will take precedent…for resolution of exactly 768 pixels.…Now being one pixel off may not affect the page,…depending on your design.…But let's say you had distinct styles between break points.…
In this example, any of the styles meant for a larger screen…is going to be applied to any tablet screen…
- 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.