Ubhala njani imibuzo yeCSS Media?

I-syntax zombini ububanzi bemizuzu emibini kunye nobubanzi bemidiya

Idizayini yewebhu yokuphendula iyindlela yokwakha iiwebhsayithi apho loo maphepha angakwazi ukuguqula ngokutsha indlela kunye nokubonakala kwazo ngokusekelwe kwisayizi yesikrini somvakalisi . Izikrini ezinkulu zifumana ulungelelwano olufanelekile kwezo ziboniso ezinkulu xa iifowuni ezincinci, njengeefowuni, zingayifumana enye ifayili efakwe ngendlela efanelekileyo yesikrini esincinci. Le ndlela inika ithuba elihle lomsebenzisi kubo bonke abasebenzisi kwaye lunokukunceda ukuphucula i-rankings injini . Ingxenye ebalulekileyo ye-web design esabelayo yi-CSS Media Media.

Imibuzo yeMidiya ifana neengxelo ezincinci ngaphakathi kwefayili yakho ye-CSS yewebsite, ekuvumela ukuba ubeke imithetho ethile yeCSS eya kuthatha kuphela xa kuthatyathwa imimiselo ethile-njengokuba ubukhulu besikrini buphezulu okanye ngaphantsi kweminye imiqobo.

Imibuzo yeMidiya eSebenza

Usebenzisa njani i-Media Queries kwiwebhusayithi? Nantsi umzekelo olula kakhulu:

1. Uza kuqala ngexwebhu le-HTML elihlelekile ngaphandle kweendlela ezibonakalayo (oko kukuthi i-CSS)
2. Kwifayili yakho yeCSS, uya kuqala njengoko uqhele ngokukwenza umzobo wekhasi kwaye ubeke isiseko sokuthi i-website iyakubheka njani. Kuthetha ukuba ufuna ubungakanani befonti bekhasi ukuba libe ngamaphikseli angama-16, ungabhala le CSS: umzimba {ubungakanani befonti: 16px; }
3. Ngoku, unokufuna ukwandisa ubungakanani befonti kwizikrini ezinkulu ezinamaxabiso amaninzi okwenza oko. Le yilapho i-Media Queries ikhawuleza khona. Uza kuqala uMbuzo weMediya njengale: @media isikrini kunye (ubuncinci-ububanzi: 1000px) {}
4. Le yintetho ye-Media Query. Iqala nge @media ukuseka i-Media Query ngokwayo. Emva koko ubeka "uhlobo lwezobume", olulesi sihloko "isikrini". Oku kusebenza kwizikrini zekhompyutheni, iipilisi, iifowuni, njl. Ekugqibeleni, ugqiba uMbuzo weMedia nge "imidiya yeendaba". Umzekelo wethu ngasentla, "ububanzi bomda: 1000px". Oku kuthetha ukuba i-Media Query iya kukhaba kwiibonakaliso ngobuncinane ubuncinane be-pixels 1000 ububanzi.

1. Emva kwezi zinto zemibuzo yeMidiya, udibanisa ukuvula kunye nokuvala ukuvala okufanayo kwento oya kuyenza kuyo nayiphi na umthetho oqhelekileyo weCSS.
2. Isinyathelo sokugqibela kuMbuzo weMidiya kukuba ukongeza imithetho yeCSS ofuna ukuyisebenzisa xa le mqathango idibene. Ungeze le miyalelo yeCSS phakathi kweengqungquthela zengqungquthela ezenza i-Query Media, njengale: @media isikrini kunye (ubuncinci-ububanzi: 1000px) {umzimba {ubungakanani befonti: 20px; }
3. Xa iifom ze-Media Query zidibene (ifayile yesiphequluli ubuncinane ubuninzi beepikseli ezili-1000), le style yeCSS iya kusebenza, ukutshintsha ubungakanani befonti yethu kwii-pixels ezili-16 esizibekele zona ekuqaleni kwexabiso lethu elitsha lama-pixels angama-20.

Ukongeza ezininzi izitayela

Unokubeka i-CSS ezininzi kwiimviwo kwi-Media Query njengoko kufuneka ukuba ulungele ukubonakala kwewebhusayithi yakho. Ngokomzekelo, ukuba awufuni nje ukwandisa ubungakanani befonti ukuya kuma-pixels angama-20, kodwa utshintshe umbala wazo zonke iziqendu kumnyama (# 000000), ungongeza le:

@media isikrini kunye (ubuncinci-ububanzi: 1000px) {umzimba {ubungakanani befonti: 20px; } {umbala: # 000000; }}

Ukongeza Imibuzo Engaphezulu Yemidiya

Ukongeza, ungongeza iiMediya zeMidiya kuzo zonke izikhulu ngobukhulu, uzifake kwiphepha lakho lesitayela njengale:

@media isikrini kunye (ubuncinci-ububanzi: 1000px) {umzimba {ubungakanani befonti: 20px; } {umbala: # 000000; {} @media isikrini kunye (ubuncinci-ububanzi: 1400px) {umzimba {ubungakanani befonti: 24px; }}

Iimviwo zokuqala zeMediya ziya kukhaba kwii-pixels ezili-1000 ububanzi, ukutshintsha ubungakanani befonti ukuya kuma-pixels angama-20. Emva koko, xa isiphequluli singaphezu kwama-pixels ayi-1400, ubungakanani befonti buya kutshintsha kwakhona kwiipixelli ezingama-24. Ungongeza iiMediya zeMedia njengoko ziyimfuneko kwiwebhusayithi yakho ethile.

Ubuncinane obude kunye nobubanzi obuphezulu

Kukho iindlela ezimbini zokubhala iMidiya yeMedia - ngokusebenzisa "ububanzi bemizuzu" okanye nge "max-width". Kuze kube ngoku, sibonile "ububanzi bemizuzu" kwisenzo. Oku kubangela ukuba iMidiya yeMediya ifumaneke emva kokuba isiqulathi sesifinyelele ubuncinane ubuncinane obuncinane. Ngoko umbuzo osebenzisa "ububanzi bemizuzu: 1000px" iya kusebenza xa isiphequluli ubuncinane ubuninzi beepeliseli ezili-1000. Olu hlobo lwemibuzo yeMediya lisetyenziselwa xa usakha isayithi "ngendlela yokuhamba yeselula".

Ukuba usebenzisa "max-width", isebenza ngendlela eyahlukileyo. Umbuzo weMedia we "max-width: 1000px" uya kusebenza emva kokuba isiqratshi siwile ngaphantsi kwesi sikhulu.

Ngokubhekiselele kubaPhuculli abadala

Umngeni omnye kunye neMidiya yeMedia kukuba ukungabikho kwenkxaso kwiinguqulo ezidlulileyo kwi-Internet Explorer. Ngombulelo, kukho i-polyfills ekhoyo ekwazi ukufaka inkxaso yeeMediya zeMidiya kulawo maqhosha asekudala, ekuvumela ukuba uyisebenzise kwiiwebhusayithi namhlanje ngeli gama ukuqinisekisa ukuba ukuboniswa kweso sayithi ayibukeli ephukile kwisofthiwe yesiphequluli esidala.

Ehlelwe nguJeremy Girard ngo-1/24/17