To write practical and reliable media query rules, you must first use min-resolution or -webkit-min-device-pixel-ratio to determine the device resolution, then load high-definition pictures through background image replacement or img's srcset, then optimize the display effect of SVG and icon fonts, and pay attention to adapting to mainstream devices, testing and verification and performance optimization. The specific steps are as follows: 1. Use min-resolution: 2dppx or -webkit-min-device-pixel-ratio: 2 to detect the Retina screen; 2. Switch the background image to the HD version through media query or automatically load the adaptive image using the srcset attribute of img; 3. It is recommended to use inline or sprite for SVG, and the icon font can be used to set the backup image with media query; 4. Segmentation equipment, focusing on adapting to 1x/2x, combined with browser tools to test and optimize the image volume to improve performance. Mastering these key points will enable clear display and good compatibility.

Media Query is a very practical tool to make web pages display clearer pictures and more delicate interfaces on high-resolution (Retina) screens. Simply put, you can use CSS media query to determine whether the user's device has high pixel density, and then load higher-definition resources or adjust the style.

The following methods can help you write practical and reliable media query rules:

1. Use min-resolution to determine screen resolution

This is the most straightforward way to use min-resolution to detect the pixel density of the device. Usually we use pixels per inch (dpi) or device pixel ratio (dppx) as units.

 @media only screen and (min-resolution: 2dppx) {
  /* Style under high resolution screen*/
}

• Commonly used values : 1.5dppx and 2dppx are common standards for Retina screens.
• Note : There are slight differences in support for different browsers. You can use -webkit-min-device-pixel-ratio as a compatible supplement:

 @media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* More comprehensive support*/
}

2. Tips for replacing high-definition pictures

If you want to display a higher definition image on the Retina screen, you can switch between different background images or srcsets of img elements through media query.

Background image example:

 .logo {
  background-image: url('logo.png');
}

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 100px; /* Set to actual display size*/
  }
}

<img src="/static/imghw/default1.png" data-src="image.png" class="lazy" alt="How to write a media query for high-resolution (Retina) displays?" > tags are recommended to use srcset :

 <img src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" srcset="image@2x.png 2x" alt="How to write a media query for high-resolution (Retina) displays?">

In this way, the browser will automatically select the appropriate picture based on the device, without additional media queries.

3. Optimization suggestions for icon fonts or SVGs

For icon fonts or SVG graphics, it can also be kept clear under the Retina screen, but there are still some details to pay attention to:

• SVG icon : Try to use inline SVG or sprite to avoid blurring when zooming.
• Icon font : Although it is clear, the rendering effect of some systems is inconsistent. You can set alternate images in conjunction with media query.
• Small size text : Sometimes it looks thinner at high resolution, and it may be helpful to increase the font thickness appropriately or use anti-aliasing controls such as font-smooth or -webkit-font-smoothing .

4. Things to note in practical application

• Don't over-segment : Not every device needs to be adapted separately, it's enough to seize the mainstream 1x/2x.
• Testing is key : you can simulate devices with different DPRs in Chrome Developer Tools to see if the styles and images are loading correctly.
• Performance considerations : High-definition pictures are larger in size, remember to compress and optimize to avoid affecting page loading speed.

Basically that's it. It is not difficult to write a useful media query. The key is to understand the concept of device pixel ratio and make reasonable adaptations based on actual content.

The above is the detailed content of How to write a media query for high-resolution (Retina) displays?. For more information, please follow other related articles on the PHP Chinese website!