Ubhala kanjani CSS Media Imibuzo?

I-syntax yombuzo womabili weminwe nobubanzi obubanzi

Umklamo wewebhu ophendulayo uyindlela yokukwakha amawebhusayithi lapho lawo makhasi angashintsha ngokunamandla ukuma kwawo nokubukeka ngokusayizi weskrini somvakashi . Izikrini ezinkulu zingathola isakhiwo esifanelekile kulawo mavidiyo amakhulu lapho amadivaysi amancane, njengamafoni eselula, angathola iwebhusayithi efanayo ehlelwe ngendlela efanelekayo yesikrini esincane. Le ndlela inikeza isipiliyoni esingcono somsebenzisi kubo bonke abasebenzisi futhi singasiza ngisho nokuthuthukisa izinga le-search engine . Ingxenye ebalulekile yokwakheka kwewebhu okuphendulayo yi-CSS Media Queries.

Imibuzo Yemidiya ifana nezitatimende ezincane ezifakiwe ngaphakathi kwefayela lakho le-CSS lewebhusayithi yakho, okuvumela ukuba usethe imithetho ethile ye-CSS eyokuthatha kuphela uma isimo esithile sihlangene - njengathi uma usayizi weskrini ungaphezulu noma ngaphansi kwemingcele ethile.

Imibuzo yemidiya esebenza

Usebenzisa kanjani i-Media Queries kuwebhusayithi? Nasi isibonelo esilula:

1. Uzoqala ngomqulu we-HTML ohleliwe mahhala kunoma yiziphi izitayela ezibukwayo (yilokho okuyi-CSS)
2. Kufayela lakho le-CSS, uzoqala njengoba uvame ukwenza ngokukhipha ikhasi bese ubeka isisekelo sokuthi iwebhusayithi izobukeka kanjani. Ngithi ufuna ukuthi usayizi wefonti wekhasi ube ngamaphikseli angu-16, ungabhala le CSS: umzimba {usayizi wefonti: 16px; }}
3. Manje, ungase ufune ukwandisa usayizi wefonti ngezikrini ezinkulu ezinezakhiwo eziningi zokwenza kanjalo. Yilapho i-Media Queries iqala khona. Uzoqala i-Media Query kanje: @media screen kanye (min-width: 1000px) {}
4. Leli yi-syntax ye-Media Query. Iqala nge @media ukusungula i-Media Query ngokwayo. Ngokulandelayo wabeka "uhlobo lwezokuxhumana", olukulesi simo "isikrini". Lokhu kusebenza kwizikrini zekhompyutha yedeskithophu, amaphilisi, amafoni, njll. Ekugcineni, uqeda i-Media Query nge "isici semidiya". Esikhathini sethu esingenhla, ukuthi "ububanzi obuphakathi: 1000px". Lokhu kusho ukuthi i-Media Query izokwenzela ukuboniswa ngobubanzi obuncane bama-pixels angu-1000 ububanzi.

1. Ngemva kwalezi zici ze-Media Query, ufaka ukuvula nokuvala i-curly brace efana nalokho ozokwenza kunoma yimuphi umthetho ojwayelekile we-CSS.
2. Isinyathelo sokugcina esiya ku-Media Query ukwengeza imithetho ye-CSS ofuna ukuyisebenzisa uma lesi simo sifinyelelwe. Ungeze le mithetho ye-CSS phakathi kwama-curly braces akha i-Media Query, njengale: @media screen kanye (ububanzi bombhalo: 1000px) {umzimba {usayizi wefonti: 20px; }}
3. Uma izimo ze-Media Query zihlangana (iwindi lesiphequluli okungenani amaphikseli angu-1000 ububanzi), lesi sitayela se-CSS sizoqala ukusebenza, sishintshe usayizi wefonti lesayithi kusuka kumaphikseli angu-16 esiwasekelwe ekuqaleni kokuya kwenani lethu elisha lama-pixel angu-20.

Ukungeza Izitayela Eziningi

Ungabeka imithetho eminingi ye-CSS ngaphakathi kwale Media Query njengoba kudingeka ukuze ulungise ukubukeka kwewebhusayithi yakho. Isibonelo, uma ungafuni nje ukwandisa usayizi wefonti kuma-pixel angu-20, kodwa futhi ushintshe umbala wazo zonke izigaba kumnyama (# 000000), ungafaka lokhu:

@media skrini futhi (ububanzi bombhalo: 1000px) {umzimba {usayizi wefonti: 20px; } p {umbala: # 000000; }}

Ukungeza Imibuzo Engaphezulu YeMidiya

Ukwengeza, ungakwazi ukwengeza amanye ama-Media Queries kuwo wonke amasayizi amakhulu, uwafake eshidi lakho lesitayela kanje:

@media skrini futhi (ububanzi bombhalo: 1000px) {umzimba {usayizi wefonti: 20px; } p {umbala: # 000000; {} @media isikrini futhi (ububanzi bombhalo: 1400px) {umzimba {usayizi wefonti: 24px; }}

I-Media Queries yokuqala izokhahlela ngamaphikseli angu-1000 ububanzi, ishintsha usayizi wefonti kuma-pixel angu-20. Khona-ke, uma isiphequluli singaphezu kwama-pixel angu-1400, usayizi wefonti wawuzoshintsha futhi kuma-pixel angu-24. Ungangezela iMedia Queries eminingi njengokudingekayo kuwebhusayithi yakho ethize.

Ubuncane-Ububanzi no-Max-Ububanzi

Ngokuvamile kunezindlela ezimbili zokubhala iMedia Queries - ngokusebenzisa "ububanzi beminithi" noma "max-width". Kuze kube manje, sibonile "ububanzi obuncane" esenzweni. Lokhu kubangela ukuthi iMidiya yeMedia isebenze uma isiphequluli sesifinyelele okungenani ukuthi ububanzi obuncane. Ngakho umbuzo osebenzisa i- "min-width: 1000px" uzosebenza uma isiphequluli okungenani amaphikiseli angu-1000 ububanzi. Lesi sitayela seMedia Query sisetshenziswa uma wakhe isayithi ngendlela "yeselula".

Uma usebenzisa "max-width", isebenza ngendlela ehlukile. Umbuzo woMidiya we "max-width: 1000px" uzosebenza uma isiphequluli sewile ngaphansi kwalesi sayizi.

Ngokuphathelene neziphequluli ezindala

Enye inselelo nge-Media Queries ukungabi naso kokusekelwa ezinkathini ezindala ku-Internet Explorer. Ngokujabulisayo, kukhona ama-polyfills atholakalayo angakwazi ukusekela i-Media Queries kulezi ziphequluli ezindala, okukuvumela ukuthi uwasebenzise kumawebhusayithi namuhla ngenkathi eqinisekisa ukuthi ukubonisa kweso sayithi akubuki kuphulwe kwisofthiwe yesiphequluli esidala.

Ihlelwe nguJeremy Girard ngo-1/24/17