Thinking of responsive design: Media query

Jason Grigsby published an article, "CSS Media query for Mobile is fool's Gold" to the media query, the idea is that using media queries on mobile devices can cause a lot of wasted resources- The browser requests a lot of resources such as images that are not available, and then writes some test cases to test some of the methods you can use. Then Tim Kadlec wrote "Media Query & Asset downloading Results", using JS to automate the test of Jason Grigsby's use case.

This article is mainly compiled from Tim's article. Let's see if we can waste resources and find the best solution.

Just look at the results.

Test One: IMG tag

Run Tests

This test attempts to hide a picture by using Display:none to the parent element of the IMG tag. The HTML and CSS code are as follows:

123	<div id= "test1" ></div>

123	@media all and (max-width:600px) {#test1 {display:none;}}

Test results

If there is a way to hide a picture that should be 100% avoided, that is display:none. It's basically useless. It seems that opera mobile and Opera Mini will not download images, while other browsers will download them. Opera can be a good control of the download of resources, for users do not see the content, it will not be pre-downloaded.

Browser	Request Picture
Android 2.1+	Request
Blackberry (6.0+)	Request
Chrome (4.1) +	Request
Chrome Mobile	Request
Fennec (10.0+)	Request
Firefox (3.6+)	Request
Ie	Request
IOS (4.26+)	Request
Kindle (3.0)	Request
Opera (11.6+)	Request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Rockmelt	Request
Safari (4+)	Request

Conclusion

It's simple: don't use it that way.

Test two: Background image Display:none

Run Tests

In this example, the DIV is set to background-image. If the screen width is less than 600px,div, it is set to Display:none. The HTML and CSS code are as follows:

1	<div id= "Test2" ></div>

12345678

#test2 {background-image:url (' images/test2.png '); width:200px;height:75px;} @media all and (max-width:600px) {#test2 {display:none;}}

Test results

The result is the same as the test: all browsers will download pictures except Opera Mini and opera Mobile and Firefox.

Browser	Request Picture
Android 2.1+	Request
Blackberry (6.0+)	Request
Chrome (4.1) +	Request
Chrome Mobile	Request
Fennec (10.0+)	Request
Firefox (3.6+)	Do not request
Ie	Request
IOS (4.26+)	Request
Kindle (3.0)	Request
Opera (11.6+)	Request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Rockmelt	Request
Safari (4+)	Request
Silk	Request

Conclusion

Likewise: do not do so. However, like the rest of the tests, there are other ways to hide the background image and avoid unnecessary requests.

Test three: The parent element of the background picture is set to Display:none

Run Tests

In this test, you set a background picture for a div tag, and then set Display:none to its parent (also a DIV) when the browser width is less than 600px. The HTML and CSS code are as follows:

123	<div id= "Test3" ><div></div></div>

12345678910

#test3 Div {background-image:url (' images/test3.png '); width:200px;height:75px;} @media all and (max-width:600px) {#test3 {display:none;}}

Test results

On the surface, this test seems to be less obvious than the test two, but the conclusion is that this method is more reliable ...

Browser	Request Picture
Android 2.1+	Do not request
Blackberry (6.0+)	Do not request
Chrome (16+)	Do not request
Chrome Mobile	Do not request
Fennec (10.0+)	Request
Firefox (3.6+)	Do not request
IE + +	Do not request
IOS (4.26+)	Do not request
Kindle (3.0)	Do not request
Opera (11.6+)	Do not request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Safari (4+)	Do not request

Conclusion

This is a good method. In addition to the less mature Fennec, other browsers do not request images that do not need to be displayed.

Test four: Background picture cascade

Run Tests

In this test, a DIV is set up with a background image. If the browser width is less than 600px, the div is given another background picture. This test is used to detect whether two images will be requested or only requested. The HTML and CSS code are as follows:

1	<div id= "Test4" ></div>

12345678910

#test4 {background-image:url (' images/test4-desktop.png '); width:200px;height:75px;} @media all and (max-width:600px) {#test4 {background-image:url (' images/test4-mobile.png ');}}

Test results

Better than setting display:none, the result of this method is a bit messy:

Browser	Simultaneous Request
Android 2.1-3.0?	Request
Android 4.0	Do not request
Blackberry 6.0	Request
Blackberry 7.0	Do not request
Chrome (16+)	Do not request
Chrome Mobile	Do not request
Fennec (10.0+)	Request
Firefox (3.6+)	Do not request
IE + +	Do not request
IOS (4.26+)	Do not request
Kindle (3.0)	Request
Opera (11.6+)	Do not request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Safari 4.0	Request
Safari 5.0+	Do not request

Conclusion

I will avoid using this method. While the environment is improving, the Android 2.x version, which dominates the Android market, will still download two images at the same time as Fennec and Kindle. Among the three, especially because of Android (fragmentation), I would recommend looking for other options.

Test five: Large background picture is set Min-width

Run Tests

In this test, a DIV element is set to a background picture when the browser width is greater than 601px, and then set to another background picture when the browser width is less than 600px. The HTML and CSS code are as follows:

1	<div id= "Test5" ></div>

1234567891011121314

@media all and (min-width:601px) {#test5 {background-image:url (' images/test5-desktop.png '); width:200px;height:75px;}} @media all and (max-width:600px) {#test5 {background-image:url (' images/test5-mobile.png '); width:200px;height:75px;}}

Test results

This scenario is a bit better:

Browser	Simultaneous Request
Android 2.1+	Do not request
Blackberry (6.0+)	Do not request
Chrome (16+)	Do not request
Chrome Mobile	Do not request
Fennec (10.0+)	Request
Firefox (3.6+)	Do not request
IE + +	Do not request
IOS (4.26+)	Do not request
Kindle (3.0)	Do not request
Opera (11.6+)	Do not request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Safari (4+)	Do not request

Conclusion

This time, more browsers are playing together. But Fennec as usual. Android 2.x is quite weird. It will request two images at the same time--but only if the screen width is greater than 600px matches to Min-width. This behavior seems to have been improved in the Android 3.0 version. It's a weird thing, and I wonder why it is. In fact, there is a good news. Jason Grigsby said his test results for this example are not quite the same as mine. So I ran this test on some Android 2.x machines. The conclusion is that my initial test results were not correct, the Android 2.x was performing well and I had problems with the platform I was originally testing. This is not only good news for developers, but also for me to restore confidence in the human race ....

But this is still not enough, you will need to provide an alternative to IE8 browsers that do not support media query, so no pictures will be displayed. Of course, this problem can be easily compatible with conditional annotations.

Test VI: Background image display:none (max-device-width)

Run Tests

This test is similar to test two, but Max-device-width is used instead of max-width. The HTML and CSS code are as follows:

1	<div id= "Test6" ></div>

12345678910

#test6 {background-image:url (' images/test6.png '); width:200px;height:75px;} @media all and (max-device-width:600px) {#test6 {display:none;}}

Conclusion

Well, there's no time to waste, the test results are basically the same as the test two.

Test Seven: Overlay high resolution

Run Tests

The final test, provided for the new ipad, uses the Retina screen so that it uses a higher-resolution image.

In this example, a div is given a background image. Then, by using the Min-device-pixel-ratio property, if the scale is greater than 1.5, a new background image will be used.

The HTML and CSS code are as follows:

1	<div id= "Test7" ></div>

123456789101112131415

#test7 {background-image:url (' images/test7-lowres.png '); width:200px;height:75px;} @media only screens and (-webkit-min-device-pixel-ratio:1.5), only screens and (-moz-min-device-pixel-ratio:1.5), only Screen and (-O-MIN-DEVICE-PIXEL-RATIO:3/2), only screen and (min-device-pixel-ratio:1.5) {#test7 {Background-image:url (' Images/test7-highres.png '); width:200px;height:75px;}}

Test results

Browser	Simultaneous Request
Android 2.1-3.0?	Request
Android 4.0	Do not request
Blackberry 6.0	Do not request
Blackberry 7.0	Do not request
Chrome (16+)	Do not request
Chrome Mobile	Do not request
Fennec (10.0+)	Do not request
Firefox (3.6+)	Do not request
IE + +	Do not request
IOS (4.26+)	Do not request
Kindle (3.0)	Do not request
Opera (11.6+)	Do not request
Opera Mini (6.5+)	Do not request
Opera Mobile (11.5)	Do not request
Safari 4.0+	Do not request

Conclusion

For security, this scheme can be tested more. It seems that this method is available in most cases. Unfortunately, it seems that Android 2.x will download two images at the same time if the device pixel ratio is greater than or equal to 1.5 (or any other value that you set in media query). So, in this case, if you use a high-resolution Android 2.x device, it will be more bitter ...

The good news is that I haven't heard of that Android 2 in my current position. X's device has a screen ratio of more than 1.5. So if your project targets iOS devices that use the retina screen, you can set the Min-device-pixel-ratio to 2 or higher, which is a bit more secure ...

Recommended

• If you want to hide a picture of the content, Display:none is not valid, so I recommend using JavaScript or server-side implementation;
• If you want to hide a background picture, the best way is to hide its parent element. If you're not comfortable with this, then overwrite it with a cascading style (like the fifth scenario above) and set the Background-image:none;
• If you want to switch multiple images, define them all in media query.

Reflection on the design of response style

Media query Now the biggest use is responsive design, God fly translation This article is also because of the recent thinking about the efficiency of responsive design. With these test results, we had better deal with mobile devices before upgrading to high-resolution devices when implementing responsive design sites. Then use the image and other external resources of the selector, be sure to write to the media query.

Feedback

If you think there are any errors in these test results, please ask in the comments, then these test case Tim are open source on GitHub, you can fork ...

Http://www.poluoluo.com/jzxy/201206/167034.html

Thinking of responsive design: Media query