Corresponding size range: 0-300px, 300-500px, 500-750px, 750-1000px, 1000px or above;
Corresponding width of img: 150px, 350px, 650px, 850px, 120px)
Description and summary of results:
It can be seen from the above results that when the width of img is 150px, the 300px image that is loaded is reduced proportionally; when the width of img is 350px, the image that is loaded is reduced proportionally > 600px picture; when the width of img is 650px, the loaded 800px picture is scaled down; when the width of img is 850px, the picture loaded is scaled in 800px picture.
Conclusion:After the browser obtains the size according to the size rules, it selectively loads the image according to the principle of “The image size is not smaller than the actual size“. In other words, selecting a picture is to select the closest picture from a collection of pictures that are larger than or equal to the actual size in the resource list. Of course, if there are no pictures of exactly the same size, they will be scaled proportionally.
B.The second time
<img src="selina.jpg" alt="alt"
srcset="600-s2.jpg 600w,800-s2.jpg 800w"
sizes="(max-width:800px) and (min-width:500px) 800px,10vw"/>
result:
Select width: 400px, 600px, 1000px
Corresponding width range: 0-500px, 500-800px, 800px or above
Corresponding width of img: 40px, 60px, 100px
in conclusion:
Using and to connect min-width and max-width is not supported in the current version (60.07b) of the Firefox developer browser and will be invalidated.
Other situations, such as or connecting min- and max- or and/or connecting the same max-/min- are not supported and are not semantically necessary.
So, how do we deal with complex media-condition situations?
Quick test 1: How does the comma-connected , ,work? (Personal understanding)
Analysis: Exchange the order of the two conditions, and take the width of the visual area to be 400px, 600px
Result: The width of all images from 0 to 1000px is 500px, and the second condition fails.
Test summary
In the assignment syntax of sizes, the order in which the conditions appear is critical. The previous conditions will not be overwritten by the later conditions. Take the above two tests as an example: in the first test, max-width:500px appears before max-width:1000px, so the repeated parts of the two conditions are not covered by the 1000px condition; in the second test, max- width:1000px appears in front of max-width:500px. The 500px condition cannot cover the part that is repeated with the previous 1000px condition, that is, its entire range, so it is invalid.
From the above summary, we get the solution to the size assignment under complex conditions: uniformly use max- or min- to form the assignment statement
Uniformly use max- to form (condition range definitions must appear in strict order from small to large)
Uniformly use min- to form (condition range definitions must appear in strict order from largest to smallest)
Other complex range compositions can be decomposed into multiple single max-/min-conditions
When the width is 0-500px, the width of img is 250px, and the browser correctly selects the image of 300px size; but after 500px, it belongs to the undefined range, (500px, 600px] range, and the browser selects the image of 600px; (600,800 px] range, the browser selects an 800px image; above 800px, it is still an 800px image.
Summary: It can be seen that in the undefined range, the browser’s default setting for the image size is 100vw. That is: the full size of the visible area.
(3) ++ meida + srcset + sizes test (art direction test)
