In this post, we will learn about CSS Media Query and how to use it to make your site responsive.
What is Media Query in CSS?
Media queries in CSS allow you to apply specific styles to your web page depending on the characteristics of the device or screen it’s being viewed on. This means that you can create styles that are optimized for different screen sizes, resolutions, and orientations, and ensure that your website looks great on any device.
Media queries are a powerful tool for making your website responsive and accessible on a wide range of devices. By using them, you can create a seamless user experience that adapts to each user’s unique device and screen size.
Media queries use the @media rule in CSS to specify a set of CSS rules to be applied to a document when certain conditions are met.
The syntax of a media query looks like this:
@media screen and (max-width: 768px) {
/* CSS rules to be applied when the screen width is less than or equal to 768px */
}
In this example, the @media rule is used to specify that the enclosed CSS rules should only apply to screens with a maximum width of 768 pixels. You can also use other conditions, such as min-width, orientation, print, and more, to define different sets of rules for different devices and situations.
Media Query with min and max width
Media queries in CSS with combined min and max-width allow you to target a specific range of screen sizes and apply specific styles to elements on the web page. You can use media queries with combined min and max width to target specific ranges of screen sizes and apply different styles to different devices. This can be especially useful for responsive design, where you want your web page to look good on any device or screen size.
The syntax for media queries with combined min and max width is as follows:
/* Apply styles to screens with a width between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* CSS rules to be applied when the screen width is between 768px and 1024px */
}
In this example, the min-width property is used to target screens with a width greater than or equal to 768px, and the max-width property is used to target screens with a width less than or equal to 1024px. The and operator is used to combine the two properties and target screens with a width between 768px and 1024px. This is commonly used for tablet screens.