A media query is used to apply a set of styles based on the browser’s characteristics including width, height, or screen resolution.
Media Queries start with the @media declaration.
Media Type:
- all: all media type devices
- print : printers
- screen: computer , tablets, smart phone
- speech: screenreaders that “reads” the page out loud
We will have four screen breakpoints:
- 320px — 480px: Mobile devices
- 481px — 768px: iPads, Tablets
- 769px — 1024px: Small screens, laptops
- 1025px — 1200px: Desktops, large screens
- 1201px and more — Extra large screens, TV
Combinations
@media screen and (min-width: 800px), print and (min-width: 1000px) { article { padding: 1rem 3rem; } }Nesting and complex decision making
CSS allows you to nest at-rules or group statements using parentheses, making it possible to go as deep as we want to evaluate complex operations.
@media (min-width: 20em), not all and (min-height: 40em) {}@media not all and (pointer: none) { … }
@media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { … } }
Responsive Design is the practice of making sure your content looks good on all screen sizes. Everything in the website including layouts, fonts and images should automatically adapt to the user’s device
