Określanie wielu szerokości boksów

Katie Hempenius

Wypróbuj tę wersję demonstracyjną

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .

• Ponownie wczytaj aplikację w oknach przeglądarki o różnych rozmiarach, aby sprawdzić, jak przeglądarka wczytuje różne obrazy i używa różnych układów w różnych rozmiarach.

Wyświetlanie kodu

• Aby sprawdzić kod, który umożliwia to działanie, przejdź do index.html:

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Co się stało?

Wartość atrybutu sizes określa, że szerokość wyświetlanego obrazu będzie wynosić: „100% szerokości widocznego obszaru” na widocznych obszarach o szerokości do 480 pikseli, „50% szerokości widocznego obszaru” na ekranach o szerokości 481–1024 pikseli oraz 800 pikseli na ekranach szerszych niż 1024 piksele. Te szerokości są zgodne ze szerokościami określonymi w kodzie CSS.

Możliwość określania wielu szerokości slotów umożliwia tworzenie układów stron, które wykorzystują różne style (czyli szerokości obrazów) w przypadku różnych rozmiarów widocznego obszaru.

Jak określić wiele szerokości boksów

• Aby określić wiele szerokości boksów reklamowych, użyj listy rozdzielonej przecinkami. Każdy element listy, z wyjątkiem ostatniego, składa się z warunków dotyczących multimediów (np. max-width lub min-width) oraz szerokości slotu.
• Ostatni element na tej liście to domyślna szerokość slotu. Jest to ustawienie domyślne, więc nie musisz określać warunków dotyczących multimediów.
• Możesz podać dowolną liczbę szerokości boksów reklamowych – liczba obrazów podanych w srcset nie ma znaczenia.

• Szerokość slotu można określić za pomocą różnych jednostek. Oto wszystkie prawidłowe szerokości:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

Nieprawidłowa szerokość:

• 25% (procentów nie można używać w przypadku atrybutu rozmiary)