Reflection on Responsive design: Media query

Article Introduction: media queries and HTTP requests

Jason Grigsby published an article in which CSS media query for Mobile is fool ' Gold ' spits out media queries, to the effect 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 in use, and then writes some test cases to test some of the available methods. Then Tim Kadlec wrote "Media Query & Asset downloading Results", using JS to automatically test the use case of Jason Grigsby.

This article is mainly organized 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 the picture by using Display:none for the parent element of the IMG tag. HTML and CSS code are as follows:

1 2 3

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

1 2 3

@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's display:none. It's basically no use. It seems that opera mobile and Opera Mini will not download pictures, and other browsers will download them. Opera can better control the download of resources, for users can not see the content, it will not be downloaded beforehand.

browser	request picture
android 2.1+
BL Ackberry (6.0+)	request
chrome (4.1) +	request
c Hrome Mobile
fen NEC (10.0+)	request
fire Fox (3.6+)
ie
ios (4.26+)	request
kindle (3.0)
opera (11.6+)	request
opera Mini (6.5+)	No, please. Ask
do not request
rockmelt	request
safari (4+)	request

Conclusion

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

Test Two: Background picture Display:none

Run Tests

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

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

1 2 3 4 5 6 7 8

#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.

" /tbody>

browser	request picture
android 2.1+
BL Ackberry (6.0+)	request
chrome (4.1) +	request
c Hrome Mobile
fen NEC (10.0+)	request
fire Fox (3.6+)	no request
ie
ios (4.26+)	request
kindle (3.0)
opera (11.6+)	request
opera Mini (6.5+)	No, please. Ask
do not request
rockmelt	request
safari (4+)	request
request

Conclusion

Also: don't do that. However, like the rest of the tests, there are other ways to hide background images while avoiding unwanted requests.

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

Run Tests

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

1 2 3

<div id= "test3" > <div></div> </div>

1 2 3 4 5 6 7 8 9 10

#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 Test two, but the conclusion is that this method is more reliable ...

TD style= "BORDER:0;PADDING:0;" > do not request

browser	request picture
android 2.1+	no request
b Lackberry (6.0+)	no request
chrome (16+)
chrome Mobile	no request
fennec (10.0+)	request
firefox (3.6+)	no request
ie 9+	no request
ios (4.2 6+)
kindle (3.0)
opera (11.6+)
opera Mini (6.5+)	do not request
do not request
safari (4+)

Conclusion

This is a good method. In addition to immature Fennec, other browsers do not request pictures that need not be displayed.

Test Four: Background picture cascade

Run Tests

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

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

1 2 3 4 5 6 7 8 9 10

#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:

The tr>

Browser	Simultaneous Request
android 2.1-3.0?
android 4.0	no
request
blackberry 7.0	no
chrome (16+)
chrome Mobile	do not request
fennec (10.0+)	request
firefox (3.6+)
ie 9+
ios (4.26+)
kindle (3.0)	request
opera (11.6+)
opera Mini (6.5+)	" does not request
opera Mobile (11.5)	no request
request
safari 5.0+	no

Conclusion

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

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 is wider than 601px, and then set to a different background picture when the browser width is less than 600px. HTML and CSS code are as follows:

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

1 2 3 4 5 6 7 8 9 (14)

@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 scheme is a little bit better:

TD style= "BORDER:0;PADDING:0;" > do not request

browser	simultaneous request
android 2.1+	no request
b Lackberry (6.0+)	no request
chrome (16+)
chrome Mobile	no request
fennec (10.0+)	request
firefox (3.6+)	no request
ie 9+	no request
ios (4.2 6+)
kindle (3.0)
opera (11.6+)
opera Mini (6.5+)	do not request
do not request
safari (4+)

Conclusion

This time, more browsers are playing together. But Fennec as always. Android 2.x is a bit weird. It requests two pictures at the same time--but only when the screen width is greater than 600px matches to Min-width. This behavior appears to have been improved in the Android 3.0 version. It's a weird thing, and I wonder why it does that. Actually, there's good news. Jason Grigsby says his test results for this case are not the same as mine. So I ran the test on some Android 2.x machines. The conclusion is that my initial test results were not very correct, and the Android 2.x was doing well and I had a problem with the platform I was testing initially. This is not only good news for developers, but also for me to restore confidence in human beings ...

But this is still not enough, you will need to provide an alternative to the IE8 browsers, those versions of browsers 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 picture display:none (max-device-width)

Run Tests

This test is similar to test two, but uses max-device-width to replace Max-width. HTML and CSS code are as follows:

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

1 2 3 4 5 6 7 8 9 10

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

Conclusion

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

Test Seven: Cascade Overlay High Resolution

Run Tests

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

In this case, a div is given to 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.

HTML and CSS code are as follows:

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

1 2 3 4 5 6 7 8 9 (15)

#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 screens and (-o-min-device-pixel-ratio: 3/2), only screens 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?
android 4.0	no
blackberry 6.0	do not request
blackberry 7.0	do not request
chrome (16+)	no request
chrome Mobile
fennec (10.0+)
firefox (3.6+)/td>
ie 9+
ios (4.26+)
kindle (3.0)	no request
opera (11.6+)
opera Mini (6.5+)	no request
opera Mobile (11.5)
safari 4.0+	no

Conclusion

In order to be safe, this scheme can be tested a little more. It seems that this method is available in most cases. Unfortunately, it looks like Android 2.x will also download two images if the device pixel is greater than or equal to 1.5 (or any other value you set in media query). So, in this case, if you're using a high-resolution Android 2.x device, it's going to be a bit hard.

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

recommended

• If you want to hide a picture of the content, Display:none is invalid, so I recommend using JavaScript scheme 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 doing this, cover it with a cascading style (like the fifth above), and then set the Background-image:none;
• If you want to switch more than one picture, define them all in media query.

on response-type design

The biggest use of media inquiries now is responsive design, which is also because of the recent reflection on the efficiency of responsive design. With these test results, when implementing a Web site that responds to design, it is best to deal with mobile devices before upgrading to a high-resolution device. Then use the image and other external resources selector, be sure to write to the media query.

Feedback

If you think there are any errors in these test results, welcome in the comments, and then these test cases, Tim, are open source on the GitHub, and the interesting words can be fork ...