Kawm saib qhov saib hauv web browsers pom kev siv qhov sib piv qhov sib txawv li cas
Ntau tus tub ntxhais kawm ntawv ntawm qhov tsim muaj qhov web tsim tau muaj kev nyuaj siv sij hawm siv feem pua rau qhov tseem ceeb dav. Tshwj xeeb tshaj yog, muaj kev ntxhov siab nrog qhov browser ntsuas cov feem pua. Hauv qab no koj yuav pom ib qho kev piav qhia meej txog seb qhov feem pua ua hauj lwm rau qhov kev suav dav hauv ib lub vas sab li cas.
Siv Pixels rau qhov dav dav
Thaum koj siv cov pixels los ua qhov dav dav, qhov tshwm sim tau yooj yim heev. Yog hais tias koj siv CSS los tsim qhov dav tus nqi ntawm ib lub caij nyob rau hauv lub header ntawm ib daim ntawv mus rau 100 pixels dav, lub caij ntawd yog qhov loj tib yam li ib qho uas koj teem rau 100 pixels dav hauv lub website cov ntsiab lus los yog footer lossis lwm qhov chaw ntawm lub nplooj ntawv. Pixels yog ib qho tseem ceeb, ces 100 pixels yog 100 pixels txawm qhov twg hauv koj daim ntawv tshwm tuaj. Hmoov tsis, thaum pixel qhov tseem ceeb yog to taub yooj yim, lawv tsis ua haujlwm zoo hauv cov websites.
Ethan Marcotte tau siv lub sij hawm "tsim qhov web tsim", piav qhia txog cov kev qhia no xws li 3 tus thawj xib fwb:
- Ib daim phiaj dej
- Kua dej tawm
- Media queries
Cov thawj ob lub ntsiab lus, ib daim phiaj dej thiab kua tawm suab, yog siv cov feem pua, tsis yog pixels, rau qhov ntsuas qhov tseem ceeb.
Siv Feem Pua Rau Qhov Ntsuas Kev Dav Dav
Thaum koj siv feem pua los tsim kom tau ib lub dav rau lub caij, qhov loj me me uas lub ntsiab lus yuav tshwm nyob rau ntawm qhov nws nyob hauv daim ntawv. Feem pua yog qhov nqi txheeb ze, txhais tau tias qhov loj me me yog txheeb ze rau lwm cov ntsiab lus hauv koj daim ntawv.
Piv txwv li, yog tias koj tsim qhov dav ntawm ib qho duab rau 50%, qhov no tsis txhais tau hais tias cov duab yuav tso tawm ntawm ib nrab ntawm nws qhov loj me. Qhov no yog ib qho kev tsis sib haum xeeb.
Yog hais tias tus duab yog 800 pixels wide, ces siv tus CSS tus nqi los tso tawm rau 50% tsis txhais hais tias nws yuav yog 300 pixels dav hauv web browser. Qhov feem pua ntawm cov nqi no tau muab xam raws li lub caij uas muaj cov duab no, tsis yog qhov loj ntawm daim duab xwb. Yog hais tias lub thauv (uas yuav yog ib qho kev faib los yog lwm cov cim HTML) 1000 tawm pixels, ces daim duab yuav tso tawm ntawm 500 pixels txij thaum tus nqi ntawd yog 50% ntawm lub khob qhov dav. Yog hais tias qhov muaj lub ntsiab yog 400 pixels dav, ces daim duab yuav tsuas tso tawm ntawm 200 pixels, vim tias tus nqi yog 50% ntawm lub khob. Cov duab nyob hauv nqe lus nug no muaj ib qho 50% me me uas nyob hauv txhua lub caij uas muaj nws.
Nco ntsoov, kev tsim tus qauv yog kua. Layouts thiab qhov ntau thiab tsawg yuav hloov li ntawm qhov screen loj / ntaus hloov . Yog tias koj xav txog qhov no hauv lub cev, cov ntsiab lus uas tsis yog lub ntsiab lus, nws zoo li muaj lub thawv ntawv uas koj sau nrog cov khoom. Yog tias koj hais tias lub thawv ntawv yuav tsum muaj ib nrab ntawm cov khoom ntawd, tus nqi ntawm cov khoom koj xav tau yuav txawv ntawm qhov loj ntawm lub npov. Tib yam muaj tseeb rau feem pua dav dav hauv web tsim.
Feem pua Raws Li Lwm Feem Pua
Hauv daim duab / lub thawv piv txwv, kuv siv qhov tseem ceeb ntawm pixel rau cov uas muaj sau los qhia tias yuav ua li cas cov duab cov duab yuav pom. Qhov tseeb tiag, cov ntsiab lus uas tseem ceeb yuav tau teem rau feem pua thiab cov duab, lossis lwm yam ntsiab lus, hauv lub thauv ntawd yuav tau txais lawv qhov kev ntseeg raws li feem pua ntawm ib feem pua.
Ntawm no yog lwm tus qauv uas qhia txog qhov no hauv kev xyaum.
Hais tias koj muaj ib lub website uas tag nrho qhov chaw muaj nyob hauv ib qho kev faib nrog ib chav kawm ntawm "thawv" (ib qho kev tsim web tsim). Sab hauv qhov sib faib no yog peb pawg haujlwm uas koj yuav nws tus qauv kom pom li 3 kab ntsig. Tias HTML yuav zoo li no:
Tam sim no, koj siv tau CSS los tsim qhov loj ntawm "thawv" faib hais 90%. Hauv qhov ua piv txwv no, lub thawv faib tsis muaj lwm lub caij uas nyob ib ncig ntawm lub cev, uas peb tsis tau teem rau ib qho nqi. Yog vim, lub cev yuav kav li 100% ntawm qhov rais qhib qhov rais. Vim li no, qhov "proportion" division feem pua yuav ua raws li qhov loj ntawm qhov rais qhib qhov rais. Raws li qhov browser qhov rai pauv loj, qhov no yuav loj npaum li cas ntawm qhov "thawv" no. Li ntawd, yog tias qhov rais qhov rai yog 2000 tawm pixels, qhov no yuav faib tawm ntawm 1800 pixels. Qhov no yog xam raws li 90 feem pua ntawm 2000 (2000 x .90 = 1800)), uas yog qhov loj ntawm qhov browser.
Yog txhua qhov ntawm cov "col" hauv cov "thawv" muaj peev xwm muab 30%, ces txhua tus yuav yog 540 pixels dav hauv qhov qauv no. Qhov no yog xam raws li 30% ntawm 1800 pixels uas lub thawv ua haujlwm ntawm (1800 x .30 = 540). Yog tias peb hloov qhov feem pua ntawm cov thauv ntawd, cov kev faib sab hauv no tseem yuav hloov qhov loj me me uas lawv tau them rau txij li thaum lawv nyob ntawm qhov uas muaj lub npe.
Cia peb xav tias qhov rais qhov rai seem ntawm 2000 pixels dav, tab sis peb hloov qhov nqi ntawm lub khob rau 80% es tsis txhob 90%. Uas txhais tau hais tias nws yuav kav ntawm 1600 pixels dav tam sim no (2000 x. 80 = 1600). Txawm hais tias peb tsis hloov CSS rau qhov peb 3 "col" me me, peb tawm hauv 30%, lawv yuav txawv dua tam sim no txij thaum lawv muaj cov khoom, uas yog lub ntsiab lus uas lawv tau los ntawm, tau hloov. Cov kev sib tshooj 3 yuav tam sim no kav li 480 pixels dav txhua qhov, uas yog 30% ntawm 1600, los yog lub npoo (1600 x .30 = 480).
Ua qhov no tseem ntxiv, yog tias muaj ib cov duab hauv ib qho ntawm cov "col" divisions thiab cov duab ntawd raug siv qhov feem pua, qhov ntsiab lus teb rau nws cov zauv yuav yog qhov "col" nws tus kheej. Raws li hais tias "col" kev hloov pauv loj, yog li yuav tus duab hauv nws. Yog tias qhov loj ntawm qhov browser lossis lub "thawv" hloov, qhov ntawd yuav cuam tshuam rau peb pawg "col", uas yuav hloov qhov loj ntawm daim duab hauv "col." Raws li koj tau pom, cov no yog txhua yam kev sib txuas nws tuaj rau feem pua-uas tau tsav koj qhov tseem ceeb.
Thaum koj xav txog tias lub tswv yim hauv cov nplooj ntawv hauv web page yuav ua li cas thaum siv tus nqi ntawm qhov dav rau qhov dav, koj yuav tsum to taub lub ntsiab lus uas lub npe nyob hauv phab ntawv cim.
Hauv kev xaus
Feem pua ua si lub luag hauj lwm tseem ceeb hauv kev tsim qhov teeb tsa rau cov websites teb . Txawm tias koj yog cov dluab piv txwv los yog siv feem pua dav dav los ua kom muaj daim phiaj sib luag tiag tiag sib luag, sib to taub cov tswv yim no yuav tsum ua kom pom qhov koj xav tau.