Detailed explanation of CSS media query properties: @media and min-width/max-width

Detailed explanation of CSS media query properties: @media and min-width/max-width

In modern web development, devices have various screen sizes and resolutions Diverse. In order to achieve a better user experience, we often need to adjust the style and layout of web pages according to different devices. CSS media query properties are a powerful tool that can help us dynamically apply different styles based on the characteristics of the device. This article will introduce the @media rules and the min-width and max-width attributes in detail, and give specific code examples.

@media rules are keywords used for media queries in CSS. By using @media rules, we can apply different styles based on different media types and conditions. The media type can be screen, print, or speech (speech synthesis), etc. The conditions can be the width, height, resolution, etc. of the device.

In media queries, commonly used condition attributes are min-width and max-width. min-width represents the minimum width of the device, while max-width represents the maximum width of the device. With these two properties, we can implement a simple responsive layout. Here is an example:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  h1 {
    font-size: 24px;
  }
  p {
    font-size: 18px;
  }
}

The above code means that when the width of the device is between 768px and 1024px, the defined style is applied. In this example, the body's background color will change to light blue, and the font sizes of h1 and p will be adjusted accordingly.

In addition to the min-width and max-width attributes, other conditional attributes can also be used to implement more complex media queries. For example, we can use min-device-width and max-device-width to query based on the actual width of the device.

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 样式定义 */
}

Another commonly used conditional attribute is orientation, which is used to determine whether the orientation of the device is landscape or portrait.

@media screen and (orientation: landscape) {
  /* 横向样式定义 */
}

@media screen and (orientation: portrait) {
  /* 纵向样式定义 */
}

Media query attributes can be nested to achieve more fine-grained style adjustments. For example, we can nest another media query within a media query and combine multiple conditional attributes to meet specific layout needs.

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  
  @media (orientation: landscape) {
    h1 {
      font-size: 24px;
      margin-top: 20px;
    }
    p {
      font-size: 18px;
    }
  }
  
  @media (orientation: portrait) {
    h1 {
      font-size: 18px;
      margin-top: 10px;
    }
    p {
      font-size: 14px;
    }
  }
}

In the example, when the device width is between 768px and 1024px, different styles are applied according to the device orientation.

To summarize, CSS media query properties are a flexible and powerful tool that can dynamically adjust web page style and layout based on device characteristics. By using @media rules and conditional attributes such as min-width/max-width, we can easily implement responsive layout and improve user experience. In actual development, we can select appropriate media query attributes according to specific needs and use them in conjunction with nesting to achieve fine style adjustments. I hope the above content is helpful to your understanding of media query properties.

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