Use media query to adapt the background map to devices of different resolutions

With the diversification of Internet access, the tool that users choose to surf the internet is no longer just a PC, but can be a mobile phone or tablet computer. The question is how to adapt the Web to different resolutions, which poses a new challenge for front-end engineers, and one of the important things is how to make the image a good user experience at different resolutions .

Method overview

The media Query property in CSS3 allows us to use different CSS depending on the width of the browser, the pixel ratio of the device, and so on. Of course, it has some other usage, please refer to here for details.

Device-pixel-ratio is a query condition for media query that is used to obtain the pixel ratio of a device. Generally speaking, the value of iphone4/4s is 2, the high-resolution ANDRIOD device is 1.5, the general device is 1, with these conditions, we can provide different resolutions of the various devices of the picture.

Assume that the image is compatible with the above pixel ratio, showing a picture with a width height of 100px. First we need to prepare three images of different resolutions: when the normal pixel ratio is 1 o'clock, we load the normal picture 100px*100px, when the pixel ratio is 1.5, load the picture of 150px*150px, when the pixel ratio is 2.0, load the picture of 200px*200px.

Using media query We can write this:

You can view the demo with a different resolution device:

Http://tgideas.qq.com/demo/media_query/demo_01.htm

Use media query to adapt the background map to devices of different resolutions