Fantaro hoe ahoana no ahafahan'ny tranonkala mpizahatany mamaritra ny fampisehoana amin'ny fampiasana ny sanda percentage
Ny mpianatra maro amin'ny famoronana tranonkala miresaka dia manana fotoan-tsarotra amin'ny fampiasana isan-jato ho an'ny sanda malalaka. Raha ny marina, misy fifanjevoana amin'ny fomba fikajan'ny navigateur ireo isan-jato. Eto ambany eto ianao dia mahita fanazavana amin'ny antsipiriany momba ny isan-jato amin'ny asa ho an'ny famakiana matihanina amin'ny tranonkala miresaka.
Ampiasao ny pikantsary ho an'ny sanda malalaka
Rehefa mampiasa pikantsara ho marim-pototra ianao, dia tena tsotra ny valiny. Raha mampiasa CSS ianao mba hametrahana mari-pamantarana marim-pototra ao amin'ny lohan'ny rakitra ho 100 pixel amin'ny lafiny malalaka, dia ho mitovy habe io singa io, toy ny iray izay mametraka pixel 100 mahery amin'ny tranonkala na tongopeana na faritra hafa ao amin'ilay tranonkala page. Ny pixel dia sanda tena izy, ka 100 pixels dia 100 pixels na aiza na aiza ao amin'ny rakitrao misy singa iray miseho. Indrisy anefa, raha toa ka mora takarina ny sanda pixel, dia tsy mandeha tsara amin'ny tranonkala miresaka.
Ethan Marcotte no namorona ny teny hoe "manamboatra tranonkala miresaka", manazava ity fomba ity amin'ny maha-tompon'andraikitra fototra 3 azy:
- A grid liquid
- Haino aman-jery
- Media queries
Ireo teboka roa voalohan-dàlana, tambajotram-pahasalamana sy ny haino aman-jery dia azo avy amin'ny fampiasana isan-jato, fa tsy pikilika, mba hampisy dikany ny soatoavina.
Fampiasana isan-jato ho an'ny sanda lehibe
Raha mampiasa percentages ianao hanamboarana sehatra iray ho an'ny singa iray, ny halehibiazan'ilay singa tena mampiseho azy dia miova arakaraka ny toerana misy azy ao amin'ilay rakitra. Ny isam-pianakaviana dia lanjan-tsarimihetsika, izay midika fa ny habeny dia mifandraika amin'ny singa hafa ao amin'ny rakitrao.
Ohatra, raha mametraka ny haben'ny sary iray ho 50%, tsy midika izany fa ny sary dia hampiseho amin'ny antsasaky ny haben'ny habeny. Diso fisainana mahazatra izany.
Raha sary 600 pixels malalaka ny sary, dia mampiasa ny sandan'ny CSS mba hampiseho azy amin'ny 50% fa tsy midika izany fa 300 pixels malalaka amin'ny tranonkala. Ity sanda percentage ity dia novaina araka ny singa izay ahitana ity sary ity, fa tsy ny habeny natokana ho an'ny sary ihany. Raha toa ka ny 1000 litatra ny sakany (izay mety ho fizarazarana na singa HTML hafa), ny sary dia hampiseho sary 500 pixels hatramin'ny 50% ny habe. Raha misy 400 pixel ny sakany, ny sary dia hiseho amin'ny 200 pixel ihany, satria izany dia 50% ny vata. Ny sary voatanisa eto dia manana habe 50% izay miankina tanteraka amin'ny singa izay ahitana azy.
Tadidio fa ny famolavolana manintona dia manidina. Ny fiovana sy ny habe dia hiova rehefa miova ny habe / Raha mieritreritra an'io amin'ny teny ara-batana sy tsy amin'ny tranonkala ianao, dia toy ny manana boaty milina karakarainao izay feno fanafody. Raha milaza ianao fa tokony ho ny antsasany dia feno ilay fitaovana, ny habetsaky ny famenoana mila anao dia miankina amin'ny haben'ny boaty. Mitovy amin'izany koa ny habaka isan-tsokajiny amin'ny tranonkala.
Ampahafantaro ny isan-jato
Raha ohatra amin'ny sary / container, ohatra, dia nampiasa tarehintsoratra pixel aho mba hampisehoana ny sary maneho azy. Raha ny tena marina, ny singa misy ny singa dia napetraka amin'ny isan-jato ihany koa ary ny sary, na singa hafa, ao anatin'io fitoeran-drano io dia mahazo ny soatoaviny mifototra amin'ny isan-jato amin'ny isan-jato.
Ity misy ohatra iray hafa mampiseho izany amin'ny fampiharana.
Lazao fa manana tranonkala iray misy ny tranokala manontolo ianao ao anaty fizaràna miaraka amin'ny kilasy "container" (fomba fanao amin'ny habakabaka iombonana). Ao anatin'io fizaràna io dia fizaràna telo hafa izay hizaranao amin'ny endrika farany amin'ny seza roanjato telo. Mety ity HTML ity:
Ankehitriny, azonao atao ny mampiasa CSS mba hametrahana ny haben'io fizarana "container" io hiteny 90%. Amin'ity ohatra ity dia tsy misy singa iray hafa mifandraika amin'izany fa tsy ny vatantsika no tsy voafaritra. Amin'ny alàlan'ny fanamarinana, ny vatany dia hanome azy ho 100% amin'ny varavarankala. Noho izany, ny isan-jaton'ny fizarana "Container" dia mifototra amin'ny haben'ny varavarankety. Satria miova ny haben'io varavarankely io, dia toy izany koa ny haben'io "container" io. Raha toa ka 2000 pixel ny sakan'ny varavarankely, dia hampiseho 1800 pixels io fizarana io. Io dia voaisa ho 90 isan-jato amin'ny 2000 (2000 x .90 = 1800)), izay habeny ny browser.
Raha ny ampahany tsirairay amin'ny fizarana "col" hita ao anatin'ny "container" dia voafetra ho 30%, dia ny 540 amin'izy ireo dia 540 pixels amin'ny lafiny rehetra amin'io ohatra io. Izany dia voaisa ho 30% amin'ny pixel 1800 izay mitondra ny fitoeran-javatra (1800 x .30 = 540). Raha nanova ny isan-jaton'io boaty io isika, dia hiova ihany koa ny fisaratsaraham-bahiny ao amin'ny habeny, satria miankina amin'izany ny singa.
Andeha hojerentsika fa ny varavarankan'ny tranokala dia mijanona amin'ny pixel 2000 malalaka, saingy manova ny lanjan'ny percentage ny container ho 80% raha tokony ho 90%. Midika izany fa hamoaka pixel 1600 ankehitriny izy (2000 x 80 = 1600). Na dia tsy manova ny CSS ho an'ny haben'ny fizarana 3 "col" aza isika, ary mamela azy ireo amin'ny 30%, dia hamerina amin'ny fomba hafa izy ireo ankehitriny satria ny singa misy azy, izay ny teny manodidina azy dia niova. Ireo fizarana 3 ireo dia hivoaka isaky ny 480 pixel ho an'ny tsirairay, izay 30% ny 1600, na ny haben'ny kaontenera (1600 x .30 = 480).
Raha raisina izany bebe kokoa, raha misy sary iray ao anatin'ireny fizarana "col" ireny ary io sary io dia isaina amin'ny fampiasana ampaham-potoana, ny sehatra ho an'ny sifidianana dia ny "col" ihany. Koa satria ny fizarana "col" dia niova lehibe, dia toy izany koa ny sary ao anatiny. Noho izany raha niova ny haben'ny navigateur na ny "container", dia mety hisy fiantraikany eo amin'ny fizarana "col" telo, izay mety hanova ny haben'ny sary ao anatin'ny "col." Araka ny hitanao, Izany dia ny lanjan'ny taranjam-pandaminana.
Rehefa heverinao fa ny singa iray ao anaty pejin-tranonkala iray dia handefa rehefa ampiasaina amin'ny lanjany ny vidin'ny isan-jato dia mila mahatakatra ny teny manodidina izay misy io singa io ao amin'ny fanamarihan'ny pejy.
Raha fintinina
Ny isan-jato dia mandray anjara mavitrika amin'ny famoronana layout ho an'ny tranonkala mitaky. Na mamolavola sary ianao na mampiasa valim-pivarotana maromaro mba hamokarana rice tena izy, izay mifandraika amin'ny samy hafa, ny fahatakarana ireo kisary ireo dia ilaina amin'ny fanatrarana ny fijerinao.