Lernu, kiel retumiloj determinas ekranon uzante procentajn valorojn
Multaj lernantoj de respondema retejo desegnis malfacilan tempon uzante procentojn por larĝaj valoroj. Specife, ekzistas konfuzo pri kiel la retumilo kalkulas tiujn procentojn. Malsupre vi trovos detalan klarigon pri kiel procentoj laboras por larĝaj kalkuloj en respondema retejo.
Uzanta Pikselojn por Larĝaj Valoroj
Kiam vi uzas pikselojn kiel larĝa valoro, la rezultoj estas tre simplaj. Se vi uzas CSS por agordi la larĝan valoron de elemento en la kaplinio de dokumento ĝis 100 pikseloj larĝe, tiu elemento estos la sama grandeco kiel unu, ke vi difinis 100 pikselojn larĝe en la enhavo aŭ piedlinio de la retejo aŭ aliaj lokoj de la paĝo. Pikseloj estas absoluta valoro, do 100 rastrumeroj estas 100 rastrumeroj, ĉu en via dokumento aperas elemento. Bedaŭrinde, dum pikselaj valoroj estas facile kompreni, ili ne funkcias bone en respondemaj retejoj.
Ethan Marcotte stampis la terminon "respondema retejo-dezajno", klarigante ĉi tiun aliron kiel enhavantan 3 ĉefajn ĉefojn:
- Fluida krado
- Fluida amaskomunikilaro
- Amaskomunikiloj
Tiuj unuaj du poentoj, fluida krado kaj fluida amaskomunikilaro, atingiĝas per uzantaj procentoj, anstataŭ pikseloj, por sizingvaloroj.
Uzanta procentojn por Larĝevaloraj Valoroj
Kiam vi uzas procentojn por establi larĝecon por ero, la reala grandeco, kiun ero montras, dependos de kie ĝi estas en la dokumento. Procentoj estas relativa valoro, kio signifas, ke la grandeco montrita estas relativa al aliaj elementoj en via dokumento.
Ekzemple, se vi agordas la larĝecon de bildo al 50%, ĉi tio ne signifas, ke la bildo montros je duono de ĝia normala grandeco. Ĉi tio estas komuna miskompreno.
Se bildo estas denaska 600 pikseloj larĝe, tiam uzante CSS-valoron por montri ĝin je 50% ne signifas, ke ĝi estos 300 pikseloj larĝe en la retumilo. Ĉi tiu procenta valoro estas kalkulita sur la elemento, kiu enhavas tiun bildon, ne la denaskan grandecon de la bildo mem. Se la ujo (kiu povus esti divido aŭ iu alia HTML-elemento) estas 1000 pikseloj larĝe, tiam la bildo montros ĉe 500 pikseloj ekde tiu valoro estas 50% de la larĝa de la ujo. Se la enhavanta elemento estas 400 pikseloj larĝe, tiam la bildo nur montros ĉe 200 rastrumeroj, ĉar tiu valoro estas 50% de la ujo. La bildo en demando ĉi tie havas 50% de grandeco, kiu dependas tute de la elemento, kiu enhavas ĝin.
Memoru, respondema dezajno estas fluida. Layouts kaj grandecoj ŝanĝos kiel la ekrano grandeco / aparato ŝanĝiĝas . Se vi pensas pri tio en fizikaj, ne-teraj terminoj, ĝi estas kiel havi kartonon-skatolon, kiun vi plenigas kun paka materialo. Se vi diras, ke la skatolo devas esti duone plenigita de tiu materialo, la kvanto de pakado, kiun vi bezonos, varias laŭ la grandeco de la skatolo. La samaj certas por procentoj larĝaj en retpaĝo.
Procentoj Bazitaj sur Aliaj Procentoj
En la bildo / kontenero ekzemplo, mi uzis pikselojn por la enhavanta elemento montri kiel la respondema bildo montriĝus. Fakte, la enhavanta elemento ankaŭ stariĝus al procento kaj la bildo, aŭ aliaj elementoj, ene de tiu ujo akirus siajn valorojn laŭ procento de procento.
Jen alia ekzemplo, kiu montras tion en la praktiko.
Diru, ke vi havas retejon, kie la tuta retejo enhavas dividon kun klaso de "ujo" (komuna retejo-dezajno). Interne tiu divido estas tri aliaj dividoj, kiujn vi eventuale stiligos por montri kiel 3 vertikalaj kolumnoj. Tiu HTML eble aspektas tiel:
Nun, vi povas uzi CSS por agordi la grandecon de tiu "ujo" divido por diri 90%. En ĉi tiu ekzemplo, la ujo divido ne havas alian elementon, kiu ĉirkaŭas ĝin krom la korpo, kiun ni ne metis al iu specifa valoro. Defaŭlte, la korpo redonos kiel 100% de la retumilo. Sekve, la procento de la "kontenero" baziĝos sur la grandeco de la retumilo. Ĉar tiu fenestro de la retumilo ŝanĝas en grandeco, do la grandeco de ĉi tiu "ujo". Do se la foliumilo estas 2000 pikseloj larĝe, ĉi tiu divido montros je 1800 pikseloj. Ĉi tio kalkulas kiel 90 procentoj de 2000 (2000 x .90 = 1800)), kio estas la grandeco de la retumilo.
Se ĉiu el la "kol" dividoj troviĝitaj ene de la "ujo" estas laŭ grandeco de 30%, tiam ĉiu el ili estos 540 rastrumeroj larĝe en ĉi tiu ekzemplo. Ĉi tio estas kalkulita kiel 30% de la 1800 rastrumeroj, kiujn la ujo pruntas je (1800 x .30 = 540). Se ni ŝanĝus la procenton de tiu ujo, ĉi tiuj internaj dividoj ankaŭ ŝanĝus laŭ la grandeco, kiun ili redonas pro tio, ke ili dependas de tio, kio enhavas elementon.
Ni supozu, ke la retumilo-fenestroj restas ĉe 2000 pikseloj larĝe, sed ni ŝanĝas la procentan valoron de la ujo ĝis 80% anstataŭ 90%. Tio signifas, ke ĝi redonos ĉe 1600 pikseloj larĝe nun (2000 x .80 = 1600). Eĉ se ni ne ŝanĝos la CSS por la grandeco de niaj 3 "kol" dividoj, kaj lasos ilin je 30%, ili redonos malsame nun, ĉar ilia enhavanta elemento, kiu estas la kunteksto, kiun ili grandas, ŝanĝis. Tiuj 3 dividoj nun redonos kiel 480 pikseloj larĝe ĉiu, kiu estas 30% de 1600, aŭ la grandeco de la ujo (1600 x .30 = 480).
Prenante ĉi tion eĉ pli, se ekzistis bildo ene de unu el ĉi tiuj "kol" dividoj kaj tiu bildo grandiĝis per procento, la kunteksto por ĝia grandeco estus la "col" mem. Ĉar tiu "kol" divido ŝanĝis en grandeco, do la bildo en ĝi. Do se la grandeco de la retumilo aŭ la "ujo" ŝanĝiĝis, tio influus la tri "kol" dividojn, kiuj ŝanĝus la grandecon de la bildo ene de la "kol." Kiel vi povas vidi, ĉi tiuj ĉiuj estas konektitaj kiam ĝi venas al procent-pelitaj sizingvaloroj.
Kiam vi konsideras, kiel elemento ene de retpaĝo pagos kiam procenta valoro estas uzata por ĝia larĝo, vi devas kompreni la kuntekston, en kiu tiu elemento loĝas en la marko de la paĝo.
En resumo
Procentoj ludas kritikan rolon en kreado de la aranĝo por respondemaj retejoj . Ĉu vi montras bildojn respondeme aŭ uzas procentajn larĝojn por fari vere fluida krado kies grandecoj estas relataj al la alia, komprenante ĉi tiujn ŝtonojn necesos por atingi la aspekton, kiun vi deziras.