Is-sintassi kemm għall-mistoqsijiet tal-midja min-wisa 'kif ukoll għall-wisa' massima
Disinn tal-web li jirrispondu huwa approċċ għall-bini ta 'websajts fejn dawk il-paġni jistgħu jbiddlu dinamikament it-tqassim u d-dehra tagħhom abbażi tad-daqs tal-iskrin tal-viżitatur . L-iskrins kbar jistgħu jirċievu arranġament adattat għal dawk il-wirjiet ikbar filwaqt li apparati iżgħar, bħal telefowns ċellulari, jistgħu jirċievu l-istess websajt ifformattjat b'mod li jkun adattat għal dak l-iskrin iżgħar. Dan l-approċċ jipprovdi esperjenza tal-utent aħjar għall-utenti kollha u jista 'anke jgħin fit- titjib tal-klassifiki tal-magni tat-tiftix . Parti importanti tad-disinn web li jirreaġixxi huwa CSS Media Queries.
Mistoqsijiet Media huma bħal dikjarazzjonijiet kondizzjonali ftit ġewwa l-fajl tas-CSS tal-website tiegħek, li jippermettilek li tiffissa ċerti regoli CSS li se jieħdu biss jaffettwaw ladarba tiġi sodisfatta ċerta kundizzjoni - bħal meta d-daqs tal-iskrin ikun 'il fuq jew taħt ċerti limiti.
Mistoqsijiet fil-Midja fl-Azzjoni
Allura kif tuża Media Queries fuq websajt? Hawn hu eżempju sempliċi ħafna:
- Trid tibda b'dokument HTML strutturat sew mingħajr xi stili viżwali (jiġifieri għal dak CSS)
- Fil-fajl tas-CSS tiegħek, tibda kif normalment tagħmel mill-grafika tal-paġna u tistabbilixxi linja bażi għal kif se tfittex il-websajt. Tgħid li riedu li d-daqs tat-tipa tal-paġna jkun ta '16-il pixel, tista' tikteb din CSS: korp {font-size: 16px; }
- Issa, tista 'tkun trid iżżid dak id-daqs tat-tipa għal skrins akbar li għandhom immobbli biżżejjed biex jagħmlu dan. Dan huwa fejn il-Mistoqsijiet fil-Midja jidħlu. Tibda Query Media bħal dan: @media screen u (min-width: 1000px) {}
- Din hija s-sintassi ta 'Mistoqsija fuq il-Midja. Jibda ma '@media biex tistabbilixxi l-Mistoqsija tal-Midja nnifisha. Imbagħad issettja t- "tip tal-midja", li f'dan il-każ huwa "screen". Dan japplika għal skrins tal-kompjuters desktop, pilloli, telefowns, eċċ Fl-aħħarnett, inti tispiċċa l-Media Query bil- "karatteristika tal-midja". Fl-eżempju tagħna ta 'hawn fuq, dan huwa "wisa' ta 'nofs: 1000px". Dan ifisser li l-Mistoqsija tal-Midja se tidħol għal displays b'wisa 'minimu ta' 1000 pixels wiesa '.
- Wara dawn l-elementi tal-Media Query, żid kustilja tal-ftuħ u l-għeluq simili għal dak li tagħmel fi kwalunkwe regola tas-CSS normali.
- L-aħħar pass għal Query Media huwa li żżid ir-regoli CSS li tixtieq tapplika ladarba din il-kundizzjoni tiġi sodisfatta. Inti żżid dawn ir-regoli tas-CSS bejn iċ-ċingi bil-kaboċċi li jiffurmaw il-Media Query, bħal dan: @media screen u (min-width: 1000px) {body {font-size: 20px; }
- Meta l-kondizzjonijiet tal-Query Media jintlaħqu (it-tieqa tal-browser hija ta 'mill-inqas 1000 pixels wiesgħa), dan l-istil CSS jidħol fis-seħħ, billi tbiddel id-daqs tat-tipa tas-sit tagħna minn 16-il pixel li stabbilixxejna oriġinarjament għal valur ġdid ta' 20 pixels.
Żieda Stili Aktar
Int tista 'tpoġġi kemm ir-regoli CSS fi ħdan din il-Media Query kif meħtieġ biex taġġusta l-apparenza viżiva tal-websajt tiegħek. Per eżempju, jekk riedu mhux biss iżidu d-daqs tal-font għal 20 pixel, iżda wkoll ibiddlu l-kulur tal-paragrafi kollha għal iswed (# 000000), tista 'żżid dan:
@medja iskrin u (min-wisa ': 1000px) {korp {font-size: 20px; } p {kulur: # 000000; }}Żieda ta 'Aktar Mistoqsijiet fil-Midja
Barra minn hekk, tista 'żżid aktar Mistoqsijiet tal-Midja għal kull daqs ikbar, u żżidhom mal-folja tal-istil tiegħek bħal din:
@medja iskrin u (min-wisa ': 1000px) {korp {font-size: 20px; } p {kulur: # 000000; {} @medja iskrin u (min-wisa ': 1400px) {body {font-size: 24px; }}L-ewwel Mistoqsijiet tal-Midja se jagħtu spinta b'150 pixels wiesa ', billi tbiddel id-daqs tal-font għal 20 pixels. Imbagħad, ladarba l-browser kien 'il fuq minn 1400 pixel, id-daqs tat-tipa jinbidel għal 24 pixel. Inti tista 'żżid kemm Mistoqsijiet tal-Midja kif meħtieġ għall-websajt partikolari tiegħek.
Min-Wisa 'u Max-Wisa'
Ġeneralment ikun hemm żewġ modi biex tikteb Mistoqsijiet fil-Midja - billi tuża "min-width" jew "max-width". S'issa rajna "min-width" f'azzjoni. Dan iwassal biex il-Mistoqsijiet dwar il-Midja jidħlu fis-seħħ ladarba l-browser ikun laħaq mill-inqas dik il-wisa 'minima Allura mistoqsija li tuża "min-width: 1000px" tapplika meta l-browser ikollu mill-inqas 1000 pixels wiesa '. Dan l-istil ta 'Media Query jintuża meta tkun qed tibni sit b'mod "mobbli-ewwel".
Jekk tuża "max-width", taħdem bil-kontra. Tiftaħ il-Midja ta '"max-width: 1000px" tapplika darba li l-browser ikun waqa' taħt dan id-daqs.
Rigward il-Browsers Older
Sfida waħda ma 'Media Queries hija n-nuqqas ta' appoġġ tagħhom f'verżjonijiet anzjani fuq l-Internet Explorer. B'xorti tajba, hemm polyfills disponibbli li jistgħu jserrħu l-appoġġ għall-Mistoqsijiet Media f'dawk browsers anzjani, li jippermettulhom li jużawhom fuq il-websajts tal-lum waqt li jkunu għadhom qed jiżguraw li l-wiri ta 'dak is-sit ma jidhirx imkisser f'softwer tal-browser anzjani.
Editjat minn Jeremy Girard fl-1/24/17