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