Wielu uczniów zajmujących się responsywnym projektowaniem stron internetowych ma trudności z używaniem wartości procentowych do wartości szerokości. W szczególności istnieje zamieszanie związane ze sposobem obliczania tych wartości procentowych przez przeglądarkę. Poniżej znajdziesz szczegółowe wyjaśnienie, jak działają wartości procentowe w obliczeniach szerokości w responsywnej witrynie internetowej.
Używanie pikseli do wartości szerokości
Kiedy używasz piksele jako wartość szerokości wyniki są bardzo proste. Jeśli użyjesz CSS aby ustawić wartość szerokości elementu w nagłówku dokumentu na szerokość 100 pikseli, element ten będzie ten sam rozmiar, który ustawisz na 100 pikseli w treści witryny, stopce lub innych obszarach strony. Piksele są wartością bezwzględną, więc 100 pikseli to 100 pikseli bez względu na to, gdzie w dokumencie pojawia się element. Niestety, chociaż wartości pikseli są łatwe do zrozumienia, nie działają dobrze z responsywnymi witrynami internetowymi.
Ethan Marcotte ukuł ten termin
„responsywne projektowanie stron internetowych”, wyjaśniając to podejście jako zawierające 3 kluczowe zasady:- Płynna siatka
- Media płynne
- Zapytania dotyczące mediów
Te pierwsze dwa punkty, płynną siatkę i płynne media, są osiągane przy użyciu wartości procentowych zamiast pikseli do określania wielkości.
Używanie wartości procentowych do wartości szerokości
Gdy używasz wartości procentowych do ustalenia szerokości elementu, rzeczywisty rozmiar wyświetlany przez element będzie się różnić w zależności od tego, gdzie się znajduje w dokumencie. Procenty to wartość względna, co oznacza, że wyświetlany rozmiar odnosi się do innych elementów w dokumencie.
Na przykład, jeśli ustawisz szerokość an wizerunek do 50%, nie oznacza to, że obraz będzie wyświetlany w połowie normalnego rozmiaru. To powszechne nieporozumienie.
Jeśli obraz ma w rzeczywistości szerokość 600 pikseli, użycie wartości CSS do wyświetlenia go w 50% nie oznacza, że w przeglądarce internetowej będzie miał 300 pikseli szerokości. Ta wartość procentowa jest obliczana na podstawie elementu zawierającego ten obraz, a nie rzeczywistego rozmiaru samego obrazu. Jeśli kontener (który może być podziałem lub innym elementem HTML) ma 1000 pikseli szerokości, obraz będzie wyświetlany w 500 pikselach, ponieważ ta wartość stanowi 50% szerokości kontenera. Jeśli element zawierający ma 400 pikseli szerokości, obraz będzie wyświetlany tylko w 200 pikselach, ponieważ ta wartość wynosi 50% kontenera. Obraz, o którym mowa, ma rozmiar 50%, który całkowicie zależy od elementu, który go zawiera.
Pamiętaj, że responsywny projekt jest płynny. Układy i rozmiary zmienią się, gdy zmiany rozmiaru ekranu/urządzenia. Jeśli myślisz o tym w kategoriach fizycznych, nieinternetowych, to tak, jakbyś miał kartonowe pudełko, które wypełniasz materiałem opakowaniowym. Jeśli powiesz, że pudełko powinno być w połowie wypełnione tym materiałem, ilość potrzebnego opakowania będzie się różnić w zależności od rozmiaru pudełka. To samo dotyczy procent szerokości w projektowaniu stron internetowych.
Procenty na podstawie innych wartości procentowych
W przykładzie obrazu/kontenera użyliśmy wartości pikseli dla elementu zawierającego, aby pokazać, jak będzie wyświetlany obraz responsywny. W rzeczywistości element zawierający również byłby ustawiony jako procent, a obraz lub inne elementy wewnątrz tego kontenera otrzymałyby swoje wartości oparte na procentach.
Oto kolejny przykład.
Załóżmy, że masz witrynę internetową, w której cała witryna znajduje się w dziale z klasą „kontenera” (powszechna praktyka projektowania stron internetowych). Wewnątrz tego podziału znajdują się trzy inne podziały, które ostatecznie wystylizujesz tak, aby były wyświetlane jako 3 pionowe kolumny.
Teraz możesz użyć CSS, aby ustawić rozmiar podziału „kontenerów” na 90%. W tym przykładzie podział kontenera nie ma innego elementu otaczającego go innego niż body, któremu nie ustawiliśmy żadnej konkretnej wartości. Domyślnie ciało będzie renderowane jako 100% okna przeglądarki. Dlatego procent podziału „kontenerów” będzie oparty na rozmiarze okna przeglądarki. W miarę jak zmienia się rozmiar okna przeglądarki, zmienia się również rozmiar tego „kontenera”. Jeśli więc okno przeglądarki ma szerokość 2000 pikseli, podział ten będzie wyświetlany przy 1800 pikselach. Jest to obliczane jako 90 procent 2000 (2000 x 0,90 = 1800)), czyli rozmiaru przeglądarki.
Jeśli każdy z podziałów „kolumn” znalezionych w „pojemniku” jest ustawiony na rozmiar 30%, to w tym przykładzie każdy z nich będzie miał szerokość 540 pikseli. Jest to obliczane jako 30% z 1800 pikseli renderowanych w kontenerze (1800 x 0,30 = 540). Gdybyśmy zmienili procent tego kontenera, te wewnętrzne podziały również zmieniłyby się w rozmiarze, w jakim renderują, ponieważ są zależne od tego elementu kontenera.
Załóżmy, że okna przeglądarki mają szerokość 2000 pikseli, ale zmieniamy procentową wartość kontenera na 80% zamiast na 90%. Oznacza to, że będzie teraz renderowany w szerokości 1600 pikseli (2000 x 0,80 = 1600). Nawet jeśli nie zmienimy CSS dla rozmiaru naszych 3 dywizji „col” i pozostawimy je na poziomie 30%, będą renderują teraz inaczej, ponieważ ich element zawierający, który jest kontekstem, według którego są one zwymiarowane, ma zmieniony. Te 3 podziały będą teraz renderowane jako każdy o szerokości 480 pikseli, co stanowi 30% z 1600 lub rozmiar kontenera 1600 x 0,30 = 480).
Idąc dalej, jeśli obraz znajdował się wewnątrz jednego z tych podziałów „kolumn”, a rozmiar tego obrazu był ustalany w procentach, kontekstem jego rozmiaru byłby sam „kolumn”. Ponieważ ten podział „kolumnowy” zmienił się w rozmiarze, podobnie obraz w nim. Jeśli więc zmieni się rozmiar przeglądarki lub „kontenera”, wpłynie to na trzy podziały „kolumn”, co z kolei spowoduje zmień rozmiar obrazu w „kolumnie”. Jak widać, wszystkie te elementy są ze sobą powiązane, jeśli chodzi o rozmiar oparty na procentach wartości.
Gdy zastanawiasz się, w jaki sposób element wewnątrz strony internetowej będzie renderowany, gdy jako szerokość zostanie użyta wartość procentowa, musisz zrozumieć kontekst, w którym ten element znajduje się w znacznikach strony.
W podsumowaniu
Procenty odgrywają kluczową rolę w tworzeniu układu responsywnych stron internetowych. Niezależnie od tego, czy dostosowujesz rozmiar obrazów, czy używasz szerokości procentowych, aby stworzyć naprawdę płynną siatkę, której rozmiary są względem siebie, zrozumienie tych obliczeń będzie konieczne, aby uzyskać odpowiedni wygląd pragnienie.