Wielu studentów reagujących na projektowanie stron internetowych ma trudności z wykorzystaniem wartości procentowych dla wartości szerokości. W szczególności nie ma pewności, w jaki sposób przeglądarka oblicza te wartości procentowe. Poniżej znajdziesz szczegółowe wyjaśnienie, jak działają wartości procentowe w obliczeniach szerokości w responsywnej witrynie internetowej.
Używanie pikseli dla wartości szerokości
Gdy używasz pikseli jako wartości szerokości, wyniki są bardzo proste. Jeśli użyjesz CSS do ustawienia wartości szerokości elementu w nagłówku dokumentu na szerokość 100 pikseli, element ten będzie miał taki sam rozmiar, jak rozmiar ustawiony na 100 pikseli w treści strony lub stopce lub w innych obszarach strona. 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 przypadku responsywnych stron internetowych.
Ethan Marcotte ukuł termin "responsive web design", wyjaśniając to podejście jako zawierający 3 kluczowe podmioty:
- Płynna kratka
- Płynne media
- Zapytania o media
Te pierwsze dwa punkty, płynną siatkę i płynne media osiąga się, stosując wartości procentowe, zamiast pikseli, dla wartości wielkości.
Korzystanie z wartości procentowych dla wartości szerokości
Gdy używasz wartości procentowych do ustalenia szerokości elementu, rzeczywisty rozmiar tego elementu będzie się różnić w zależności od tego, gdzie jest w dokumencie. Procenty są wartością względną, co oznacza, że wyświetlany rozmiar jest względny w stosunku do innych elementów w dokumencie.
Na przykład, jeśli ustawisz szerokość obrazu na 50%, to nie będzie oznacza, że obraz będzie wyświetlany w połowie jego normalnego rozmiaru. Jest to powszechne nieporozumienie.
Jeśli obraz ma natywnie szerokość 600 pikseli, użycie wartości CSS do wyświetlania go w 50% nie oznacza, że będzie on miał szerokość 300 pikseli w przeglądarce. Ta wartość procentowa jest obliczana na podstawie elementu zawierającego ten obraz, a nie rodzimego rozmiaru samego obrazu. Jeśli kontener (który może być podziałem lub innym elementem HTML) ma szerokość 1000 pikseli, obraz będzie wyświetlany na poziomie 500 pikseli, ponieważ ta wartość wynosi 50% szerokości kontenera. Jeśli element zawierający ma szerokość 400 pikseli, obraz będzie wyświetlany tylko z 200 pikselami, ponieważ ta wartość wynosi 50% kontenera. Omawiany obraz ma rozmiar 50%, który zależy całkowicie od elementu, który go zawiera.
Pamiętaj, że responsywny projekt jest płynny. Układy i rozmiary zmieniają się wraz ze zmianą rozmiaru ekranu / urządzenia. Jeśli myślisz o tym w kategoriach fizycznych, niezwiązanych z Internetem, to tak, jakbyś miał kartonowe pudełko, które wypełniasz materiałem do pakowania. Jeśli powiesz, że pudełko powinno być w połowie wypełnione tym materiałem, wymagana ilość pakowania będzie się różnić w zależności od rozmiaru pudełka. To samo dotyczy szerokości procentowych w projektowaniu stron internetowych.
Procenty na podstawie innych wartości procentowych
W przykładzie obraz / kontener użyliśmy wartości pikseli dla elementu zawierającego, aby pokazać, jak wyświetlałby się obraz responsywny. W rzeczywistości element zawierający również byłby ustawiony jako procent, a obraz lub inne elementy wewnątrz tego kontenera otrzymywałyby wartości na podstawie procentowej wartości procentowej.
Oto inny przykład, który pokazuje to w praktyce.
Załóżmy, że masz stronę internetową, na której cała witryna znajduje się w dziale z klasą "kontener" (popularna praktyka projektowania stron internetowych). Wewnątrz tego podziału znajdują się jeszcze trzy inne dywizje, które w końcu będą wyglądały jak 3 pionowe kolumny. Ten HTML może wyglądać tak:
Teraz możesz użyć CSS, aby ustawić rozmiar tego "pojemnika" na 90%. W tym przykładzie podział kontenera nie ma innego elementu, który otacza go innym niż ciało, którego nie ustawiliśmy na żadną konkretną wartość. Domyślnie treść zostanie wyświetlona jako 100% okna przeglądarki. Dlatego procent podziału "kontenera" będzie zależał od wielkości okna przeglądarki. Gdy to okno przeglądarki zmieni rozmiar, zmieni się rozmiar tego "kontenera". Jeśli więc okno przeglądarki ma szerokość 2000 pikseli, podział ten będzie wyświetlany w rozdzielczości 1800 pikseli. Jest to obliczane jako 90-procentowa wartość 2000 (2000 x .90 = 1800)), która jest wielkością przeglądarki. Jeśli każdy z podzbiorów "col" znajdujących się w "kontenerze" jest ustawiony na 30%, to w tym przykładzie każdy z nich ma szerokość 540 pikseli. Jest to obliczane jako 30% z 1800 pikseli, które renderuje kontener (1800 x .30 = 540). Gdybyśmy zmienili procent tego kontenera, te wewnętrzne podziały również zmieniłyby się w rozmiarze, w którym się wyświetlają, ponieważ zależą od tego, który zawiera element. Załóżmy, że okna przeglądarki mają szerokość 2000 pikseli, ale zmienimy wartość procentową kontenera na 80% zamiast 90%. Oznacza to, że renderuje się teraz na szerokości 1600 pikseli (2000 x .80 = 1600). Nawet jeśli nie zmienimy CSS na rozmiar naszych 3 "col" dywizji, i zostawimy je na poziomie 30%, będą renderować inaczej teraz, ponieważ ich element zawierający, który jest kontekstem, przez który są zmieniane, się zmienił. Te 3 dywizje będą teraz renderować jako szerokość 480 pikseli, czyli 30% z 1600, lub rozmiar kontenera (1600 x .30 = 480). Biorąc to jeszcze dalej, jeśli w jednej z tych "col" dywizji był obraz, a ten obraz był zwymiarowany za pomocą wartości procentowej, kontekstem dla jego rozmiaru byłby sam "col".Gdy podział "col" zmienił się, tak samo wyglądałby obraz wewnątrz. Więc jeśli zmieni się rozmiar przeglądarki lub "kontenera", wpłynie to na trzy podziały "col", które z kolei zmienią rozmiar obrazu wewnątrz "col". Jak widać, wszystkie są połączone, jeśli chodzi o wartości wielkości zależne od wartości procentowej. Kiedy zastanawiasz się, jak element wewnątrz strony zostanie wyrenderowany, gdy wartość procentowa zostanie użyta dla jego szerokości, musisz zrozumieć kontekst, w którym element ten znajduje się w znacznikach strony. Procenty odgrywają kluczową rolę w tworzeniu układu dla responsywnych stron internetowych. Niezależnie od tego, czy sortujesz obrazy w sposób responsywny, czy używasz szerokości w procentach, aby uzyskać prawdziwie płynną siatkę, której rozmiary są względem siebie nawzajem, zrozumienie tych obliczeń będzie konieczne, aby uzyskać pożądany wygląd. W podsumowaniu
