mercredi 15 avril 2015

How this 's srcset computed out

I read an article about srcset: Explaining The Last Clause of the src-n Grammar. In this article, there is an example for explaining the complex of srcset.Here is part of it:



It says that your layout has two breakpoints, at 640px and 960px, where your layout changes. In the smallest layout, this image will be presented at 100% of the viewport width, in the next it'll be 50% (a two-column design, perhaps), and in the largest it'll be 33% (a three-column design).



Next the author give the code demo of above condition expressed by using srcset:



<img srcset="
320.jpg .89x 400w, 480.jpg 1.33x 400w, 640.jpg 1.78x 400w,
480.jpg 1.04x 520w, 640.jpg 1.39x 520w, 960.jpg 2.09x 520w,
640.jpg 1.1x 639w, 960.jpg 1.66x 639w, 1280 2.2x 639w,
320.jpg 0.89x 800w, 480.jpg 1.33x 800w, 640.jpg 1.78x 800w,
480.jpg 1.09x 959w, 640.jpg 1.45x 959w, 960.jpg 2.18x 959w,
320.jpg 0.89x 1200w, 480.jpg 1.33x 1200w, 640.jpg 1.78x 1200w,
480.jpg 1.09x 1440w, 640.jpg 1.45x 1440w, 960.jpg 2.18x 1440w,
480.jpg 0.86x 1920w, 640.jpg 1.14x 1920w, 960.jpg 1.71x 1920w, 1280 2.29x 1920w,
640.jpg 0.86x, 960.jpg 1.29x, 1280 1.71x, 1920 2.57x
">


However, I can't figure it out how the author computed all the stuff, which like the .89, 1.04, 1.1. How these pixel density computed out? In the description above there is only two breakpoints: 960px and 640px, so how the other 400w, 520w, 639w comes out?


Aucun commentaire:

Enregistrer un commentaire