Source:- What are media queries
For more questions and answers visit our website at Frontend Interview Questions
Media query is a CSS technique introduced in CSS3.It is a technique to apply different styles or layouts to a web page based on the characteristics of the user’s device or screen size. Media queries allow web developers to create designs that adapt and look well-organized on various devices, such as desktop computers, laptops, tablets, and smartphones.
With media queries, you can set specific CSS rules to trigger only when certain conditions are met, such as the width of the viewport. This enables you to create flexible and responsive designs that provide an optimal viewing experience regardless of the device being used to access the website.
Here’s an example of a media query in CSS:
/* This CSS rule will apply to screens with a maximum width of 600 pixels */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}In this example, the `@media` rule specifies a condition for when the screen width is at most 600 pixels. If the screen width matches this condition (i.e., the screen is 600 pixels wide or narrower), the styles inside the curly braces will be applied. In this case, the background color of the `body` element will be changed to light…