Ntawm no yog yuav ua li cas ntxiv cov qauv tsim tsim cov qauv siv CSS
Saib ntawm cov websites nrov hnub no thiab ib qho kev kho mob tsim kho uas koj nco ntsoov pom loj, kuaj cov duab tom qab. Ib qho ntawm cov kev cov nyom nrog ntxiv cov dluab los ntawm qhov kev xyaum zoo tshaj plaws uas cov websites yuav tsum tau teb rau qhov ntau thiab tsawg dua qhov ntau thiab cov cuab yeej - ib qho kev hu ua cov lus teb tsim .
Txij thaum koj lub website qhov teeb tsa hloov thiab nplai nrog ntau qhov sib npaug ntau, yog li dhau lawm yuav tsum cov duab tom qab teev lawv qhov me me.
Qhov tseeb, cov "fluid images" yog ib qho tseem ceeb ntawm cov nplooj ntawv teb (nrog rau cov qauv dej thiab cov lus nug). Cov thawv uas peb tau ua yog ib lub qauv ntawm cov qauv tsim ntawm lub hauv paus pib txij thaum pib, tab sis thaum nws yeej ib txwm ua tau yooj yim ntxiv rau cov duab hauv inline rau ib qhov chaw (cov dluab hauv inline yog cov graphics uas muaj cim ua ib feem ntawm cov HTML cim), ua zoo tib yam nrog rau cov duab tom qab (uas yog styled rau hauv nplooj ntawv siv CSS keeb kwm yav dhau los) tau ntev muab cov teeb meem tseem ceeb rau ntau lub web designers thiab cov kws kho mob kawg. Ua tsaug, qhov sib ntxiv ntawm "qhov khoom loj" hauv CSS tau ua qhov no.
Nyob rau hauv ib tsab xov xwm cais, kuv tau siv kev siv CSS3 tom qab cov khoom nto-loj los ncab cov duab kom haum rau hauv lub qhov rais, tab sis nws muaj ib qho chaw zoo dua, kom pab tau ntxiv rau cov cuab yeej no. Ua li no, peb yuav siv cov cuabyeej nram qab no thiab tus nqi ua ke:
tom qab-qhov loj: npog;
Cov cuab yeej lub ntsiab lus tseem ceeb qhia rau qhov browser kom pom cov duab kom haum lub qhov rai, tsis hais seb qhov loj npaum li cas los yog qhov me me ntawd qhov rai. Daim duab yog scaled los npog tag nrho lub vijtsam, tab sis tus thawj proportions thiab nam piv yog khaws cia tseg, tiv thaiv cov duab nws tus kheej los ntawm kev ua distorted.
Daim duab tso rau hauv lub qhov rais kom loj li sai tau kom tag nrho cov qhov rai saum npoo npog. Qhov no txhais tau hais tias koj yuav tsis muaj qhov chaw tsis muaj dab tsi nyob rau hauv koj nplooj ntawv lossis kev cuam tshuam ntawm daim duab, tab sis nws kuj txhais tau hais tias qee cov duab yuav raug txiav tawm nyob ntawm qhov piv txwv ntawm lub vijtsam thiab cov duab nug. Piv txwv li, cov duab ntawm cov duab (saum toj, hauv qab, sab laug, los yog sab xis) yuav raug txiav tawm ntawm cov duab, nyob ntawm seb yam twg yog qhov koj siv rau qhov khoom tom qab. Yog hais tias koj taw qhia txog keeb kwm yav dhau los "sab laug sab laug", qhov tshaj ntawm daim duab yuav tawm hauv qab thiab sab sab xis. Yog tias koj nruab nrab cov duab tom qab, qhov tshaj yuav tuaj tawm ntawm tag nrho cov tog, tab sis vim tias qhov ntau tshaj tawm kis tawm, qhov cuam tshuam ntawm ib sab yuav tsis pab tsawg.
Yuav siv cov keeb kwm yav dhau los li cas: npog;
Thaum tsim koj tus duab tom qab, nws yog lub tswv yim zoo los tsim ib qho duab uas haum loj. Thaum browsers tuaj yeem ua tus duab me me tsis muaj qhov cuam tshuam zoo rau kev pom qhov zoo, thaum ib qhov browser nplai li tus duab rau ib qho loj loj dua nws qhov tseem fwv, qhov kev pom zoo yuav tsum degraded, ua zuaj thiab pixelated. Tus downside rau qhov no yog tias koj nplooj ntawv yuav tsum siv qhov kev ua yeeb yam thaum koj xa cov dluab loj heev rau txhua cov ntxiab.
Thaum koj ua li no, nco ntsoov npaj cov duab rau cov duab download thiab lub vas sab . Thaum kawg, koj yuav tsum nrhiav qhov nruab nrab ntawm kev txaus siab ntawm qhov loj txaus duab thiab qhov zoo thiab qhov tsim nyog ua ntaub ntawv loj rau kev download speeds.
Ib qho ntawm ntau txoj hauv kev siv cov duab scaling keeb kwm yog thaum koj xav tias cov duab coj mus rau tag nrho cov keeb kwm ntawm ib nplooj ntawv, seb qhov nplooj yog dav thiab raug saib ntawm lub computer lub computer los yog ntau me me thiab raug xa mus rau ib tug handheld, mobile pab kiag li lawm.
Upload koj tus duab rau koj tus web host thiab ntxiv rau koj CSS raws li ib cov duab tom qab:
tom qab duab: url (foob pob hluav taws-dhau-wdw.jpg);
tom qab rov tso: tsis rov-tso rov;
tom qab txoj haujlwm: qhov chaw nruab nrab;
tom qab txuas ntxiv: tsau;
Ntxiv cov browser ua ntej CSS ua ntej:
-Webkit-background-size: npog;
-moz-background-size: npog;
-o-qhov-loj-loj: npog;
Tom qab ntawd ntxiv cov khoom CSS:
tom qab-qhov loj: npog;
Siv Cov Txim Sib Txawv Uas Muaj Ntau Yam Uas Txaus Siab Rau
Thaum cov qauv tsim rau ib lub desktop lossis laptop kev paub tseem ceeb heev, ntau yam khoom siv uas tuaj yeem nkag mus rau hauv lub Web tau loj hlob, thiab ntau ntau ntau qhov kev tshuaj xyuas ntau ntau nrog qhov ntawd.
Raws li yav tas los hais, ntsig txog ib qho duab zoo heev tom qab duab ntawm ib lub smartphone, piv txwv li, tsis yog ib qho kev tsim txaj lossis muaj kev hloov siab tshaj plaws.
Kawm li cas koj tuaj yeem siv cov lus nug los pab cov duab uas yuav tsim nyog rau cov cuab yeej lawv yuav muab tso rau hauv, thiab ntxiv txhim kho koj lub vev xaib nrog cov khoom siv mobile.
Thawj tsab xov xwm los ntawm Jennfier Krynin. Edited by Jeremy Girard 9/12/17