Media Queries

This lesson discusses the media queries in CSS and how they are used to create responsive designs for different screen sizes.

Media Queries

The @media rule is used to apply different styles for different media types, such as screen sizes, devices, or orientations. Media queries can be used to create responsive designs that adapt to different screen sizes.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of media queries. In this example, the flex direction of the <div> elements is changed to column when the screen width is less than 400 pixels, and the width and height of the elements are changed when the screen width is less than 600 pixels.

More About Media Queries

You can learn more about media queries from the following sources:

Code Editor