Określanie wielu szerokości boksów

Katie Hempenius

Wypróbuj tę wersję demonstracyjną

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

• Załaduj ponownie aplikację w oknach przeglądarki o różnych rozmiarach, aby zobaczyć, jak przeglądarka wczytuje różne obrazy i używać różnych układów w zależności od rozmiaru.

Wyświetl kod

• Zapłać index.html za kod, który umożliwia działanie:

<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ść widocznego obszaru będzie wynosić: „100% szerokości widocznego obszaru” w 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 z szerokościami określonymi w pliku CSS.

Możliwość określenia wielu szerokości boksów uwzględnia układy stron, które stosują różne style (czyli szerokości obrazów) w przypadku różnych rozmiarów widocznego obszaru.

Jak określić wiele szerokości przedziałów

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

• Szerokość przedziału można określić za pomocą różnych jednostek. Wszystkie prawidłowe szerokości to:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

Następujące wartości są nieprawidłowe:

• 25% (wartości procentowe nie mogą być używane z atrybutem rozmiar)