Media queries allow you to apply different CSS styles for different screen sizes.
They help your website change layout, font size, and spacing based on the device.
With media queries, you can create one website that works perfectly on mobile, tablet, and desktop.
This media query applies styles only when the screen width is 600 pixels or less.
Media queries help you customize design for smaller devices.
On large screens, the panels appear side by side.
On small screens, they stack vertically for better readability.
This is how navigation menus change for mobile screens.
Media queries make it possible to redesign layouts without changing HTML.
Basic parts of a media query
- Media type like screen
- Condition like max-width
- CSS rules inside the block
Media queries are also used to adjust text size for better readability.
Practice task
Create a page and:
- Add a media query for max-width 600px
- Change background color
- Change layout direction
- Resize the browser and test
Next lesson
In the next page, you will learn about breakpoints and screen sizes.