Concept

Media Queries is a feature of CSS3 that allows us to apply different styles and layouts for different screen sizes. This allows us to create flexible and responsive websites on desktops, mobile phones, and tablets.

Media Queries based on conditions such as screen width, screen height, aspect ratio, and many other factors. When those conditions are met, styles and layouts are applied.

How to use

To use Media Queries, we need to set conditions and apply corresponding styles. Here is an example illustrating the use of Media Queries to change the font size on your website:

/* Kiểu dáng mặc định */
body {
  font-size: 16px;
}

/* Media Queries cho màn hình nhỏ */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* Media Queries cho màn hình trung bình */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
}

/* Media Queries cho màn hình lớn */
@media screen and (min-width: 1025px) {
  body {
    font-size: 20px;
  }
}

In the example above, we use @media to start a Media Query. We define conditions by using screen to specify the device type and use conditions like max-width and min-width to determine the screen size limits.

When the screen meets the conditions, the styles are applied. In the example above, we change the font size on the website based on the screen size. With a screen smaller than 600px, the font size will be smaller. With a screen size from 601px to 1024px, the font size will be larger. And with a screen larger than 1025px, the font size will be the largest.