# 133: Reszponzív képek kitalálása - CSS-trükkök

Valószínűleg kissé ritka vagyok abban az értelemben, hogy inkább élveztem, hogy lépést tudtam tartani az érzékeny képek dolgával. Érdekes probléma, amely rengeteg érdekes megoldást eredményezett. Az egész azonban most kezd véget vetni, most, hogy a hivatalos megoldások a következők:

1. és barátai
2. 

   Mondjuk, hogy 1x-es képernyőn vagyunk. Mivel elmondtuk a böngészőnek, hogy ezeket a képeket olyan nagy mértékben fogjuk használni, amennyire csak lehet (a nézetablak 100% -a), a „töréspontok” arra az esetre, amikor a böngésző kinyitja a képeket, 1280 képpontos, 640 képpontos felbontással történnek. és 320 képpont, ugyanazok a pontos méretek, mint amilyennek elmondtuk a képeket.

   Ha kétszeres képernyőn vagyunk, akkor ezek a „töréspontok” felére csökkennek (függetlenül attól, hogy mit csinálunk valójában a képek méretezéséhez), és 640 képpontos, 320 képpontos és 160 képpontos felbontásúak lesznek.

   Tegyük fel, hogy ugyanazokat a képeket használjuk, de sokkal többet tudunk az oldal elrendezésünkről, és valami ilyesmit használtunk:

   Itt azt mondjuk (az sizesattribútummal együtt), hogy ha a nézetablak 500 képpontos vagy kisebb, akkor a képet 250 képpont szélességgel kívánjuk megjeleníteni. Ha a nézetablak ennél szélesebb, jelenítse meg a képet 500 képpontos szélességgel.

   Ez megfelelne a CSS-nek, mint ez:

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

   1x-es képernyőn mindig akkor kapja meg a 320w-os (kicsi) képet, ha a nézetablak 500px-es vagy annál kisebb, és mindig a 640w-os (közepes) képet kapja, ha a nézetablak nagyobb. Soha nem fogja megkapni a nagy képet, mert ez azt mondhatja, hogy soha nem lesz szüksége annyi képpontra.

   Ona 2x képernyő, akkor mindig akkor kapja meg a 640w (közepes) képet, ha a nézetablak szélessége 500px vagy kisebb (mert szerinte 500px pixelre van szüksége, a kicsi pedig 320px-nél nem elég), és mindig megkapja a 1280 W-os (nagy) kép, ha a nézetablak nagyobb. Soha nem fogja megkapni a kis képet, mert soha nem elég pixel ahhoz, hogy lefedje azt, amit mondtál neki, és amelyen a képet renderelni akarod.

   Tényleges méretezés

   Ne feledje, hogy a kép tényleges méretezése még mindig rajtad múlik. Azt gondolnám, hogy az esetek többségében te csinálod a CSS-en keresztül. És a CSS mindig nyer. Amit ott deklarál, az a kép renderelt szélessége lesz, függetlenül attól, hogy mi történik a srcsetés sizesmással. Ez csak azt deríti ki, hogy melyik kép jelenik meg.

   Ez az, ami miatt a méretek attribútuma kissé kemény. Tegyük fel, hogy valami ilyesmi van:

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

   Ez egyáltalán nem szokatlan. Akkor most milyen méretet használ az sizesattribútumban? Ez 13,33% lenne (szorozd össze őket), mert ennek a számnak a nézetablakhoz kell viszonyulnia, nem pedig a tárolóhoz. És ez nem veszi figyelembe a margókat, a betéteket és a tárolókat, így ez egyfajta tipp. Gondolom, a szoros szám a patkókban, a kézigránátokban és a méretek attribútumban.

   Akkor tegyük fel, hogy jön egy média lekérdezés, és a test valójában mindezek mellett 75% -kal széles lesz. Ezt tudnia kell, hogy beállítsa a képek renderelt méretét. A méretek attribútuma a következő lehet:

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

   Ezután ismételje meg ezt minden olyan elrendezési média lekérdezésnél, amely hatással van a tartalomképekre. Kicsit összetettebbé válhat.

   Gyakorlati méretek?

   Gyanítom, hogy a legtöbb valós világban valami ilyesmit használ:

   Feltéve, hogy a tartalomképek nagyjából a fele akkoraak lesznek, mint a nagy képernyőkön a böngészőablak, és a kis képernyőkön a böngészőablak teljes mérete - hagyja, hogy a töréspontok ott történjenek, ahol történnek. Így is meglehetősen tisztességes választást fog kapni, anélkül, hogy elrontaná az összes média lekérdezés pontos megfelelését.

   És ne feledje, hogy ezek tartalmi képek. A HTML általában hosszabb ideig tart, mint a CSS vagy a JS, különösen, ha tartalma van.

   Egyéb tudnivalók

   Azt is megadhatja, hogy egy kép 2x vagy 1x legyen-e az srcsettel. Tehát egy igazán egyszerű felhasználási eset lehet:

   Ez önmagában elég hasznos. Ne keverje a megadott szélességekkel. Ahogy Eric Portis mondja:

   És még egyszer hadd hangsúlyozzam, hogy bár a forrásokhoz 1x / 2x felbontású leírókat csatolhat leírók srcsethelyett w, az 1x / 2x és w nem keveredik. Ne használja mindkettőt ugyanabban srcset. Igazán.

   És emlékszel, amikor azt mondtam, hogy az eredeti kép kitöltése egyszerű? Az új lehet ilyen egyszerű, de a benne lévő elemek is támogatják srcsetés sizes. Ez azt jelenti, hogy nagyon konkrét lehet. Ehhez hozzáad egy újabb réteget:

   1. Te döntöd el, melyik

      Linkek

      • Martin Wolf cikke, amely ezt inspirálta
      • A Picturefill az a polifill, amelyet használni szeretne.
      • Tim Wright Smashing Magazine cikke a Picturefill 2.0-n
      • Eric Portis arról, hogy miért létezik az Srcset és a méretek, és mit old meg jobban, mint a média lekérdezések
      • Eric Portis többet az újról

      Lásd Chris Coyier (@chriscoyier) Pen srcset & méretei testét a CodePen-en.