Дознајте како веб прелистувачите одредуваат приказ со проценти
Многу студенти на одговорен веб дизајн имаат тешко време со користење проценти за ширина вредности. Поточно, постои конфузија со тоа како прелистувачот ги пресметува тие проценти. Подолу ќе најдете детално објаснување за тоа како процентите работат за пресметки на ширина во одговорен веб-сајт.
Користење на пиксели за вредности на ширина
Кога користите пиксели како ширина вредност, резултатите се многу јасни. Ако користите CSS за да ја поставите ширината на елементот во заглавието на документот до ширина од 100 пиксели, тој елемент ќе биде со иста големина како оној што ќе го поставите широк 100 пиксели во содржината или подножјето на веб-страницата или другите области на страница. Пикселите се апсолутна вредност, па 100 пиксели се 100 пиксели, без разлика каде во вашиот документ се појавува елемент. За жал, додека вредностите на пикселите се лесно разбирливи, тие не работат добро во одговорите на веб-страниците.
Итан Marcotte го измисли терминот "одговорен веб дизајн", објаснувајќи дека овој пристап содржи три клучни принципи:
- Течност мрежа
- Флуидни медиуми
- Медиумски прашања
Оние први две точки, течна мрежа и медиуми со течност, се постигнуваат со користење на проценти, наместо на пиксели, за големината на вредностите.
Користење на проценти за ширина вредности
Кога користите проценти за да утврдите ширина за елемент, вистинската големина на елементот што се прикажува ќе варира во зависност од тоа каде е во документот. Процентите се релативна вредност, што значи дека прикажаната големина е релативна со другите елементи во документот.
На пример, ако ја поставите ширината на сликата до 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)), што е големината на прелистувачот.
Ако секоја од "кол" поделбите пронајдени во "контејнерот" се поставени на големината од 30%, тогаш секој од нив ќе биде широк 540 пиксели во овој пример. Ова се пресметува како 30% од 1800 пиксели што контејнерот ги прави (1800 x .30 = 540). Ако го сменивме процентот на тој контејнер, овие внатрешни поделби, исто така, би се промениле во големината на која тие даваат, бидејќи тие се зависни од тоа што содржат елемент.
Да претпоставиме дека прозорците на прелистувачот остануваат ширум 2000 пиксели, но ние ја менуваме процентуалната вредност на садот на 80% наместо 90%. Тоа значи дека ќе се направи сега со ширина од 1600 пиксели (2000 x .80 = 1600). Дури и ако ние не го смениме CSS за големината на нашите 3 "кола" поделби, и остави ги на 30%, тие ќе направат поинаку сега, бидејќи нивниот елемент за содржина, кој е контекстот за кој тие се големини, се промени. Овие 3 одделенија сега ќе се направат како ширина од 480 пиксели, што е 30% од 1600 или големината на садот (1600 x 30 = 480).
Земајќи го ова уште подалеку, ако имало слика во една од овие "колективни" поделби и таа слика е со големина со процент, контекстот за нејзината големина би бил самиот "кол". Бидејќи таа "поделба" поделба е изменета во големина, така ќе слика во неа. Значи, ако големината на прелистувачот или "контејнерот" се промени, тоа ќе влијае на три "колективни" поделби, кои за возврат ќе ја променат големината на сликата во внатрешноста на "кол." Како што можете да видите, сите овие се поврзани кога станува збор за процентуални вредности на големината.
Кога разгледувате како елемент во внатрешноста на веб-страница ќе се прикаже кога се користи процентна вредност за неговата ширина, треба да го разберете контекстот во кој тој елемент е сместен во ознаката на страницата.
Во краток преглед
Процентите играат клучна улога во креирањето на изгледот за соодветни веб-страници . Без разлика дали ги отсликувате сликите соодветно или користите процентни ширини за да направите навистина течна мрежа чии големини се релативни едни на други, разбирањето на овие пресметки ќе биде неопходно за постигнување на изгледот што го посакувате.