How to Use CSS3 Media Query

Table of Contents

• Introduction
• Using Media Queries
• Resources
• Conclusion

Introduction

If you want to apply media-specific styles to your site, you can use CSS3 media queries.

Using Media Queries

The following example applies styles when the viewport width is greater than 240px:

/* apply these styles when width is greater than 240px */
@media only screen and (min-width: 240px) {
}

Resources

Check the detailed documentation from the following URL: CSS media queries.

Also, see the CSS3 media queries' specification.

In addition, you should probably use Modernizr on your site. See modernizr.js. Media Query is a CSS3 feature, but if the browser doesn't support it, you might have to implement a fallback on your own.

Conclusion

CSS3 media queries are essential for building responsive websites. They allow you to apply different styles based on screen size and device characteristics. Using tools like Modernizr can help ensure compatibility with older browsers.