✏️ Practice: CSS Media Queries and Responsive Design
Goal: Practice implementing media queries into your own sites to ensure your content is polished and easily-readable on all screen sizes.
Warm Up
- What is the difference between a media feature and media type?
- What does the term viewport mean?
- With your partner, discuss some of the benefits of media queries and responsive design. Why is it important?
Code
Implementing Media Queries
Go back and add in media queries on any site you built today. You should include media queries that restyle your site for the following screen sizes:
- Mobile screens (roughly 300 – 480 pixels wide)
- Medium and tablet screens (roughly 700 – 1000 pixels wide)