Exploring CSS media query properties: @media and min-device-width/max-device-width

CSS media query attribute exploration: @media and min-device-width/max-device-width, specific code examples are required

Introduction:
With With the popularity of mobile devices, responsive design of websites has become more and more important. When implementing responsive design, CSS media query properties play a crucial role. This article will explore the @media and min-device-width/max-device-width media query properties in depth and provide specific code examples.

1. @media media query attribute:
@media is a media query attribute introduced by CSS3, which can apply different style rules according to different media devices or screen parameters. Commonly used media types include screen, print, speech, etc., while commonly used media characteristics include width, height, color, resolution, etc.

The following is an example of using the @media attribute to adapt to different screen sizes:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 1201px) {
  body {
    background-color: lightgray;
  }
}

In the above code example, when the screen width is less than or equal to 600px, body The background color is light blue; when the screen width is within the range of 601px to 1200px, the body background color is light green; when the screen width is greater than or equal to 1201px, the body background color is light grey.

Using the @media media query attribute can flexibly adjust the layout and style according to the screen size, so that the page can be displayed well on different devices.

2. min-device-width/max-device-width media query attributes:
min-device-width and max-device-width media query attributes are the same as min-width and max- width is similar, except that the former is calculated based on the physical size of the device, while the latter is calculated based on the size of the browser window.

The following is an example that uses the min-device-width and max-device-width properties to adapt to different device screen sizes:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    background-color: lightblue;
  }
}
@media only screen and (min-device-width: 1025px) and (max-device-width: 1440px) {
  body {
    background-color: lightgreen;
  }
}
@media only screen and (min-device-width: 1441px) {
  body {
    background-color: lightgray;
  }
}

In the above code example, when the device screen width is 768px When the device screen width is between 1025px and 1440px, the background color of body is light green; when the device screen width is greater than or equal to 1441px, the background color of body is light gray. Use the min-device-width and max-device-width media query properties to adjust the layout and style according to the physical size of the device so that the page can adapt to different devices.

Conclusion:

CSS media query properties are a very useful tool when implementing responsive design. This article explores the @media and min-device-width/max-device-width media query properties in depth, and provides specific code examples. By flexibly using these properties, we can adjust the style and layout according to the screen size or the physical size of the device, thereby achieving excellent responsive design effects.

Reference:

MDN Web Docs: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

The above is the detailed content of Exploring CSS media query properties: @media and min-device-width/max-device-width. For more information, please follow other related articles on the PHP Chinese website!