Понимание математики srcset и размеров

Question

Я раскошелился и исправил простой кодэп сегодня утром, когда я пытался понять разметку srcset и размеров и математику за тем, как изображение выбирается в определенных точках разлома. Вот ручка: http://codepen.io/patrickwc/pen/Ijuwq

Скопировано здесь:

HTML:

<div class="container"> 

    <div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div><!-- 

    --><div class="container__item"> 
     <img 
     src="http://placehold.it/320x320" 
     srcset="http://placehold.it/1536x1536 1536w, 
     http://placehold.it/1024x1024 1024w, 
     http://placehold.it/900x900 900w, 
     http://placehold.it/600x600 600w, 
     http://placehold.it/320x320 320w" 
     sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw" 
     alt="Testing, testing"> 
    </div> 

    </div> 

CSS:

*, *:before, *:after { 
    box-sizing: border-box; 
    } 

    body { 
    margin: 0; 
    padding: 0; 
    } 

    img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    } 

    .container { 
    margin: 0; 
    padding: 0; 
    background: red; 
    list-style: none; 
    } 

     .container__item { 
     display: inline-block; 
     vertical-align: top; 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     } 


    @media (min-width: 30em) { 
    .container__item { 
     width: 50%; 
    } 
    } 

    @media (min-width: 62.5em) { 
    .container__item { 
     width: 25%; 
    } 
    } 

Это не имеет смысла для меня вплоть до 62.5em точки останова. Это 1000 пикселей. Учитывая, что я указал в атрибуте sizes, что на (min-width: 62.5em) 25vw картинка должна занимать четверть от размера экрана, почему 600 x 600 загружается первым? 1000/4 = 250, так что картинка 320 будет хорошо. Я много читал на картинке и читал замечательные посты Эрика Портиса и Криса Койера по этому вопросу. Я не понимаю, что я делаю неправильно, или если это просто странная ошибка?

Answer 1

Ваше значение sizes должно начинаться с самой узкой точки останова и постепенно двигаться к более широким, поэтому в вашем случае это должно быть (min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw.

В противном случае, если вы находитесь на экране сетчатки, DPR экрана также учитывается при определении того, какое изображение выбрать.

Наконец, математика, лежащая в основе алгоритма выбора, специфична для браузера (т. Е. Не является частью спецификации), поэтому вы не должны полагаться на разработчика. Он может изменяться между браузерами, между версиями браузера и на основе условий и предпочтений пользователя.