Tlhaloso ea lipotso tsa bobeli ba bophara bo boholo le bophara bo boholo
Moqapi oa marang-rang oa boitsebiso ke mokhoa oa ho haha maqephe a marang-rang moo maqephe ao a ka fetolang phetoho ea bona le ponahalo e thehiloeng boholo ba khalase ea moeti . Litšoantšo tse kholo li ka fumana mekhoa e lumellanang le mechine e kholoanyane, ha lisebelisoa tse nyane, joaloka liselefouno, li ka fumana sebaka se le seng sa marang-rang se hlophisitsoeng ka tsela e loketseng skrine eo e nyenyane. Mokhoa ona o fana ka phihlelo e ntlafetseng ea basebelisi bakeng sa basebelisi bohle mme e ka ba ea thusa ho ntlafatsa maemo a ho batla lienjiniere . Karolo ea bohlokoa ea moqapi oa websaete e amohelehang ke CSS Media Queries.
Lipotso tsa mecha ea phatlalatso li na le lipolelo tse nyenyane tse nang le maemo a ka hare ho faele ea CSS ea marang-rang ea hau, e leng se u lumellang hore u behe melao e meng ea CSS e tla nka feela ha boemo bo itseng bo le teng - joalo ka ha boholo ba khalase bo ka holimo kapa ka tlaase ho meeli e itseng.
Lipotso tsa Mecha ea litaba
Joale u sebelisa Media Queries joang websaeteng? Mohlala o bonolo haholo:
- U tla qala ka tokomane ea HTML e hlophisitsoeng hantle ntle le mekhoa leha e le efe e bonahalang (ke seo CSS e leng sona)
- Ka faele ea hau ea CSS, o tla qala kamoo u tloaetseng ho etsa ka setaele leqepheng le ho beha motheo oa hore na websaete eo e tla shebahala joang. E re u batla hore boholo ba mongolo oa leqephe e be pixels tse 16, o ka ngola CSS: body {font-size: 16px; }}
- Hona joale, u ka 'na ua batla ho eketsa boholo ba fonte bakeng sa li-skrini tse kholo tse nang le matlotlo a maholo a ho etsa joalo. Mona ke moo Media Queries e kenang teng. U tla qalisa Media Query e kang ena: @media skrine le (metsotsoana-bophara: 1000px) {}
- Ena ke poleloana ea Media Query. E qala ka @media ho theha Media Query ka boeena. Ka mor'a moo o behile "mofuta oa mecha ea phatlalatso", eo tabeng ena e leng "skrine". Sena se sebetsa ho lik'homphieutha tsa skrine, matlapa, li-fono, joalo-joalo. Qetellong, o felisa Media Query ka "mecha ea litaba". Mohlala oa rona o ka holimo, ke "bohareng ba bophara: 1000px". Sena se bolela hore Phatlalatso ea Mecha ea litaba e tla phunyeletsa bakeng sa lipontšo ka bophara bo fokolang ba pixels 1000 bophara.
- Ka mor'a likarolo tsena tsa Query Media, u eketsa sekoahelo sa ho bula le ho koala se ts'oanang le seo u tla se etsa ho puso leha e le efe e tloaelehileng ea CSS.
- Bohato ba ho qetela ho Media Query ke ho eketsa melao ea CSS eo u batlang ho e sebelisa hang ha boemo bona bo fihlile. U eketsa melao ena ea CSS pakeng tsa li-braces tse khabisitsoeng tse hlahisang Media Query, tse kang tsena: @media screen le (min-width: 1000px) {body {font-size: 20px; }}
- Ha maemo a Media Query a finyelloa (fensetere ea sebapali bonyane bophahamo ba lipelisi tse 1000), mokhoa ona oa CSS o tla sebetsa, ho fetola boholo ba pola ea sebaka sa hau ho tloha pixels tse 16 tseo re li thehiloeng qalong ho bohlokoa ba rona ba li-pixelse tse 20.
Ho eketsa Mefuta e mengata
U ka beha melao e mengata ea CSS ka har'a Phatlalatso ea Media e hlokahalang ho fetola ponahalo ea hau ea marang-rang ea hau. Ka mohlala, haeba u sa batle feela ho eketsa boholo ba fonte ho li-pixelse tse 20, empa hape u fetole 'mala oa lirapa tsohle ho batsho (# 000000), u ka eketsa sena:
@media skrine le (min-width: 1000px) {body {font-size: 20px; } p {mmala: # 000000; }}Ho eketsa Lipotso tse ling tsa mecha ea litaba
Ho phaella moo, o ka eketsa tse ling tsa Media Queries bakeng sa boholo bo bongata bo boholo, o ba eketsa ka leqephe la hau la setaele joaloka ena:
@media skrine le (min-width: 1000px) {body {font-size: 20px; } p {mmala: # 000000; {} @media skrine le (min-width: 1400px) {body {font-size: 24px; }}Mecha ea pele ea Media Queries e ne e tla phunyeletsa ka lipilisi tse 1000 ka bophara, ho fetola boholo ba mongolo ho li-pixelse tse 20. Joale, ha sebapali se ne se le ka holimo ho li-pixels tse 1400, boholo ba fonte bo ne bo tla fetoha hape ho pixels tse 24. U ka eketsa tse ngata tsa Media Queries kamoo ho hlokahalang bakeng sa sebaka sa hau sa marang-rang.
Bophara ba Min-Bophara le Max-Width
Ka kakaretso litsela tse peli tsa ho ngola Media Queries - ka ho sebelisa "bophara ba metsotso" kapa ka "max-width". Ho fihlela joale, re bone "bophara ba metsotso" bo sebetsong. Sena se etsa hore Media Queries e sebetse hang ha sebapali se fihlile bonyane bophara ba bonyane boo. Kahoo potso e sebelisang "bophara bo fokolang: 1000px" e tla sebetsa ha sebapali bonyane lipekisi tse 1000 bophara. Mokhoa ona oa Media Query o sebelisoa ha o haha setša "mokhoa oa pele oa mohala".
Haeba u sebelisa "max-width", e sebetsa ka tsela e fapaneng. Phatlalatso ea Mecha ea phatlalatso ea "max-width: 1000px" e tla sebetsa hang ha sebapali se oele tlasa boholo bona.
Mabapi le Bapalami ba khale
Bothata bo bong le Media Queries ke ho hloka thuso ha bona liphetolelong tsa khale ho Internet Explorer. Ka lehlohonolo, ho na le li-polyfills tse fumanehang tse ka tšehetsang Media Queries ho li-browser tsa khale, tse u lumellang hore u li sebelise maqepheng a kajeno ha u sa ntse u netefatsa hore pontšo ea sebaka seo ha e shebahale e robehile mobung oa khale.
E hlophisitsoe ke Jeremy Girard ka la 12/24/17