# 133: reaguojančių vaizdų išsiaiškinimas - CSS-gudrybės

Aš tikriausiai esu kiek retas tuo, kad man labiau patiko stengtis neatsilikti nuo reaguojančių vaizdų. Tai įdomi problema, sukėlusi daug įdomių sprendimų. Vis dėlto dabar viskas baigiasi, nes oficialūs sprendimai yra:

1. ir draugai
2. 

   Tarkime, kad esame 1x ekrane. Kadangi mes pasakėme naršyklei, kad naudosime šiuos vaizdus kuo didesnius (100% peržiūros srities), „lūžio taškai“, kada naršyklė apvers vaizdus, ​​įvyks 1280 pikseliais, 640 pikseliais, ir 320 piks., tokie patys tikslūs dydžiai, kaip ir pasakėme.

   Jei būsime 2x ekrane, tie „lūžio taškai“ sumažės perpus (neatsižvelgiant į tai, ką iš tikrųjų darome, kad padidintume tuos vaizdus) ir bus 640, 320 ir 160 taškų.

   Tarkime, mes naudojame tuos pačius vaizdus, ​​bet mes žinome daug daugiau apie savo puslapio išdėstymą ir naudojome kažką panašaus į šį:

   Čia sakome (su sizesatributu), jei peržiūros sritis yra 500 taškų ar mažesnė, ketiname vaizdą rodyti 250 taškų pločio. Jei peržiūros sritis yra platesnė, rodykite vaizdą 500 taškų pločio.

   Tai atitiktų CSS taip:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   1x ekrane visada gausite 320w (mažą) vaizdą, kai peržiūros sritis yra 500px pločio ar mažesnė, o 640w (medium) vaizdą visada gausite, kai peržiūros sritis yra didesnė. Niekada negausite didelio vaizdo, nes jis gali pasakyti, kad jums niekada nereikės tiek daug taškų.

   „Ona 2x“ ekrane visada gausite 640 W (vidutinį) vaizdą, kai peržiūros srities plotis yra 500 pikselių ar mažesnis (nes manoma, kad jam reikia 500 taškų pikselių, o mažo nepakanka esant 320 taškų), ir visada gausite 1280 W (didelis) vaizdas, kai peržiūros sritis yra didesnė. Niekada negausite mažo atvaizdo, nes niekada nepakanka pikselių, kad padengtumėte tai, ką jums sakėte, kad ketinate pateikti vaizdą.

   Faktinis dydžio nustatymas

   Atminkite, kad tikrasis vaizdo dydis vis tiek priklauso nuo jūsų. Manyčiau, kad daugeliu atvejų tai darote per CSS. Ir CSS visada laimi. Tai, ką ten deklaruosite, bus atvaizduoto vaizdo plotis, kad ir kas nutiktų su srcsetir sizeskita. Tai tik išsiaiškina, kuris vaizdas bus rodomas.

   Tai daro dydžių atributą šiek tiek sunkų. Tarkime, kad turite kažką panašaus:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Tai visai neįprasta. Taigi, kokį dydį naudojate sizesatribute? Tai būtų 13,33% (padauginkite juos visus kartu), nes šis skaičius turi būti susijęs su peržiūros sritimi, o ne su sudėtiniu rodiniu. Ir tai neatsižvelgia į ant šių konteinerių esančias maržas, užpildus ir kita medžiagą, todėl tai tarsi spėjimas. Spėju, arti pasagų, rankinių granatų ir dydžių atributo.

   Tada tarkime, kad atsiranda žiniasklaidos užklausa, o kūnas iš tikrųjų tampa 75% pločio. Jūs turite tai žinoti, kad galėtumėte koreguoti, koks, jūsų manymu, bus vaizdų dydis. Jūsų dydžių atributas gali tapti:

   sizes="(min-width: 500px) 8%, 13.33%"

   Tada dar kartą pereikite tai kiekvienai jūsų išdėstymo laikmenos užklausai, turinčiai įtakos turinio vaizdams. Tai gali būti šiek tiek sudėtinga.

   Praktiniai dydžiai?

   Aš įtariu, kad dauguma realiame pasaulyje naudojamų dalykų bus panašūs į:

   Darant prielaidą, kad turinio vaizdai bus maždaug pusė naršyklės lango dydžio dideliuose ekranuose ir viso naršyklės lango dydžio mažuose ekranuose - tiesiog leiskite lūžio taškams įvykti ten, kur jie vyksta. Tokiu būdu vis tiek gausite gana padorų pasirinkimą, nenukreipdami tikslingai į visas medijos užklausas.

   Ir atminkite, kad tai yra turinio vaizdai. HTML paprastai trunka ilgiau nei CSS ar JS, ypač kai jis yra turinys.

   Kiti dalykai, kuriuos reikia žinoti

   Taip pat galite nurodyti, ar vaizdas yra 2x, ar 1x su srcset. Taigi tikrai paprastas naudojimo atvejis gali būti:

   Vien tai yra gana naudinga. Nemaišykite jo nurodydami pločius. Kaip sako Ericas Portisas:

   Ir vėl leiskite man pabrėžti, kad nors prie šaltinių galite pridėti 1x / 2x raiškos aprašus, srcseto ne wdeskriptorius, 1x / 2x & w nemaišykite. Nenaudokite abiejų tuo pačiu srcset. Tikrai taip.

   Ir prisimeni, kai sakiau, kad originalus nuotraukų pildymas buvo lengvas? Naujas gali būti toks lengvas, tačiau viduje esantys elementai taip pat palaiko srcsetir sizes. Tai reiškia, kad galite būti labai konkretus. Tai prideda dar vieną sluoksnį:

   1. Jūs nusprendžiate kuris

      Nuorodos

      • Tai įkvėpė Martino Volfo straipsnis
      • „Picturefill“ yra polifildas, kurį norite naudoti.
      • Smashing Magazine straipsnis apie „Picturefill 2.0“, autorius Timas Wrightas
      • Ericas Portisas, kodėl egzistuoja „Srcset“ ir dydžiai ir ką jis išsprendžia geriau nei žiniasklaidos užklausos
      • Erikas Portisas su daugiau apie naują

      Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen srcset & dydžių“ testą „CodePen“.