Научете как уеб браузърите определят дисплей с процентни стойности
Много студенти от отзивчив уеб дизайн имат трудно време, използвайки проценти за стойностите на ширината. По-конкретно, има объркване с начина, по който браузърът изчислява тези проценти. По-долу ще намерите подробно обяснение за това как процентите работят за изчисления на ширина в отзивчив уебсайт.
Използване на пиксели за стойности на широчина
Когато използвате пиксели като ширина, резултатите са много ясни. Ако използвате CSS, за да зададете ширината на елемент в заглавката на документа на ширина 100 пиксела, този елемент ще бъде със същия размер като този, който сте задали до 100 пиксела в съдържанието или в долния колонтитул на сайта или в други области на страница. Пикселите са абсолютна стойност, така че 100 пиксела е 100 пиксела, независимо от това къде във вашия документ се появява елемент. За съжаление, докато стойностите на пикселите са лесни за разбиране, те не работят добре в отзивчивите уеб сайтове.
Ethan Marcotte изработи термина "отзивчив уеб дизайн", обяснявайки, че този подход съдържа 3 ключови принципа:
- Решетка за течности
- Течна среда
- Медийни заявки
Тези първите две точки, течна мрежа и флуидна среда, се постигат чрез използване на проценти, вместо пиксели, за определяне на размера.
Използване на проценти за стойности на широчина
Когато използвате проценти за установяване на ширина за елемент, действителният размер, който елементът показва, ще варира в зависимост от това къде е в документа. Процентите са относителна стойност, което означава, че показаният размер е относим към други елементи в документа ви.
Например, ако зададете ширината на изображение на 50%, това не означава, че изображението ще се покаже на половината от нормалния му размер. Това е често срещано погрешно схващане.
Ако изображението е нативно широко 600 пиксела, тогава използването на CSS за показване на 50% не означава, че той ще бъде с ширина 300 пиксела в уеб браузъра. Тази процентна стойност се изчислява въз основа на елемента, който съдържа това изображение, а не на естествения размер на самото изображение. Ако контейнерът (който може да бъде отделен елемент или друг HTML елемент) е широк 1000 пиксела, изображението ще се покаже на 500 пиксела, тъй като тази стойност е 50% от ширината на контейнера. Ако съдържащият елемент е с ширина 400 пиксела, изображението ще се покаже само при 200 пиксела, тъй като тази стойност е 50% от контейнера. Въпросното изображение тук има 50% размер, който изцяло зависи от елемента, който го съдържа.
Не забравяйте, че отзивчивият дизайн е плавен. Размерите и размерите ще се променят при промяна на размера / устройството на екрана . Ако мислите за това във физически, не-уеб термини, е като да имате картонена кутия, която запълвате с опаковъчен материал. Ако кажете, че кутията трябва да е наполовина пълна с този материал, необходимото количество опаковка ще варира в зависимост от размера на кутията. Същото важи и за процентните ширини в уеб дизайна.
Проценти, базирани на други проценти
В примера на изображението / контейнера използвах пикселни стойности за съдържащия елемент, за да покажа как ще се показва чувствителното изображение. В действителност, съдържащият елемент също ще бъде определен на процент и изображението или други елементи в контейнера ще получат стойностите си въз основа на процент от процента.
Ето още един пример, който показва това на практика.
Кажете, че имате уеб сайт, където целият сайт се съдържа в отделение с клас "контейнер" (обща практика за уеб дизайн). Вътре в това подразделение са три други подразделения, които в крайна сметка ще се оформят като 3 вертикални колони. Този HTML може да изглежда така:
Сега можете да използвате CSS, за да зададете размера на това разделение "контейнер", за да кажете 90%. В този пример разделянето на контейнера няма друг елемент, който го заобикаля, освен тялото, което не сме задали на конкретна стойност. По подразбиране тялото ще се изобрази като 100% от прозореца на браузъра. Следователно процентът на раздела "контейнер" ще се основава на размера на прозореца на браузъра. Тъй като този прозорец на браузъра се променя по размер, така ще бъде размерът на този "контейнер". Така че, ако прозорецът на браузъра е широк 2000 пиксела, това разделение ще се показва на 1800 пиксела. Това се изчислява като 90% от 2000 (2000 x .90 = 1800)), което е размерът на браузъра.
Ако всяко от разделенията "col" намерени в "контейнера" е зададено на размер 30%, тогава всеки от тях ще бъде широк 540 пиксела в този пример. Това се изчислява като 30% от 1800 пиксела, които контейнерът прави при (1800 х .30 = 540). Ако променяме процента на този контейнер, тези вътрешни раздели също ще се променят в размера, който те правят, тъй като те са зависими от този съдържащ елемент.
Да приемем, че прозорците на браузъра остават с широчина 2000 пиксела, но променяме процентната стойност на контейнера на 80%, вместо на 90%. Това означава, че то ще стане широко 1600 пиксела (2000 x .80 = 1600). Дори да не променяме CSS за размера на нашите 3 "col" разделения и да ги оставим на 30%, те ще станат по-различни сега, тъй като техният съдържащ елемент, който е контекстът, в който са оразмерени, се е променил. Тези 3 дивизии сега ще бъдат с дължина 480 пиксела, което е 30% от 1600, или размерът на контейнера (1600 х .30 = 480).
При това още повече, ако имаше изображение в една от тези "разделяния" и това изображение беше оразмерено с помощта на процент, контекстът за неговата оразмеряване би бил самият "col". Тъй като разделът "col" се променя в размер, така и изображението вътре в него. Така че, ако размерът на браузъра или "контейнера" се промени, това би засегнало три разделения "col", което на свой ред ще промени размера на изображението в "col." Както виждате, всички са свързани, когато става въпрос за процентно ориентирани стойности за оразмеряване.
Когато разглеждате как елемент вътре в уеб страницата ще се изобрази, когато се използва процентна стойност за нейната ширина, трябва да разберете контекста, в който този елемент се намира в маркирането на страницата.
В обобщение
Процентите играят решаваща роля при създаването на оформлението за отзивчиви сайтове . Независимо дали измервате размерите на изображения поотделно или използвате процентни ширини, за да направите истинска течна мрежа, чиито размери са относими един към друг, разбирането на тези изчисления ще бъде необходимо за постигане на желания от вас вид.