Media Queries

Lecture 81:- Media Queries

• Media queries are CSS rules that allow you to apply different styles based on the characteristics of the device, such as screen size, screen resolution, and aspect ratio. Media queries are used to create responsive designs that adapt to different devices and screen sizes.

  A media query consists of a media type and one or more expressions that check the characteristics of the device. The media type specifies the type of media the query applies to, such as screen, print, or handheld. The expressions are used to check the characteristics of the device, such as its screen size or resolution.

  Here is an example of a simple media query:

  cssCopy code

  @media only screen and (max-width: 600px) {  body {    font-size: 16px;  } }

  In this example, the media query specifies that it applies only to screens and checks if the maximum width of the screen is 600 pixels. If the conditions of the media query are met, the styles inside the media query are applied.

  Media queries can be used to create multiple breakpoints in a responsive design, where different styles are applied based on the size of the viewport. This allows you to optimize the layout and content for different devices and screen sizes, providing a better user experience for your visitors.