Introduction to Media Queries
Media Queries are a feature of CSS that allow you to apply styles based on the screen size, device type, or resolution. They are essential for creating responsive websites that work well on mobile phones, tablets, and desktops.
Why Media Queries are Important
Media Queries help your website adapt to different screen sizes. Without them, a website may look good on a desktop but broken or hard to use on a mobile device. They improve user experience and make your design flexible and modern.
Basic Syntax
A media query uses the @media rule followed by a condition.
Example
@media (max width 600px)
body
font size 14px
This means the styles will apply only when the screen width is 600 pixels or smaller.
Common Types of Media Queries
Max Width
Used when applying styles for smaller screens such as mobile devices.
Example
@media (max width 768px)
container
width 100 percent
Min Width
Used for larger screens like tablets or desktops.
Example
@media (min width 768px)
container
width 750px
Orientation
Used to detect whether the device is in portrait or landscape mode.
Example
@media (orientation portrait)
body
background color lightblue
Breakpoints in Responsive Design
Breakpoints are the screen sizes where your layout changes. Common breakpoints include 480px for mobile, 768px for tablets, and 1024px for desktops.
Responsive Design with Media Queries
Media Queries allow you to adjust layouts, font sizes, images, and spacing based on screen size. For example, you can stack elements vertically on mobile and display them side by side on larger screens.
Best Practices
Use mobile first approach by designing for small screens first and then adding styles for larger screens
Keep your code simple and organized
Test your design on different devices and screen sizes
Use flexible layouts like Flexbox or Grid along with Media Queries
Conclusion
Media Queries are a powerful tool in CSS that help create responsive and user friendly websites. Learning how to use them properly will improve your web design skills and ensure your websites look great on all devices.