Jak działają wartości procentowe w obliczeniach szerokości w responsywnej witrynie internetowej

Dowiedz się, jak przeglądarki internetowe określają wyświetlanie za pomocą wartości procentowych

Spis treściZwiększać

• Używanie pikseli do wartości szerokości
• Używanie wartości procentowych do wartości szerokości
• Procenty na podstawie innych wartości procentowych
• W podsumowaniu

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

Gdy używasz pikseli jako wartości 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, ten element będzie miał taki sam rozmiar, jak ustawiony na szerokość 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 w responsywnych witrynach internetowych.

Ethan Marcotte ukuł ten termin responsywne projektowanie stron internetowych, wyjaśniając to podejście jako zawierające 3 kluczowe zasady:

1. Płynna siatka
2. Media płynne
3. 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 obraz do 50%, to nie oznacza, ż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 szerokość 400 pikseli, obraz będzie wyświetlany tylko w rozdzielczości 200 pikseli, 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 będą się zmieniać wraz ze zmianą 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 jest zawarta w podziale z klasą kontenera (powszechna praktyka projektowania witryn 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 tego podziału kontenera na powiedzmy 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 kontenera 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 kolorów znalezionych w kontenerze 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 podziałów col i pozostawimy je na poziomie 30%, będą one teraz renderowane inaczej, ponieważ zmienił się ich element zawierający, czyli kontekst, według którego są one dopasowane. 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 w jednym z tych działów col znajdował się obraz, a jego rozmiar był określany w procentach, kontekstem jego zmiany byłby sam col. Wraz ze zmianą rozmiaru tego podziału na kolory, podobnie jak 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 zmieni rozmiar obrazu wewnątrz kolumny. Jak widać, wszystkie one są ze sobą powiązane, jeśli chodzi o procentowe wartości rozmiaru.

Gdy zastanawiasz się, jak 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 dopasowujesz rozmiary obrazów w sposób responsywny, 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ć pożądany wygląd.