Ang syntax alang sa min-width ug max-width nga mga pangutana sa media
Ang responsive nga web design usa ka pamaagi sa pagtukod og mga webpage diin ang mga panid mahimong mag-usab-usab sa ilang layout ug hitsura base sa gidak-on sa screen sa bisita . Ang dagko nga mga screen makadawat og usa ka layout nga haum sa mga mas dako nga display samtang ang gagmay nga mga himan, sama sa mga mobile phone, makadawat sa sama nga website nga giporma sa paagi nga angay alang sa gamay nga screen. Kini nga pamaagi naghatag og usa ka mas maayo nga kasinatian sa tiggamit alang sa tanan nga mga tiggamit ug kini makatabang sa pagpalambo sa mga ranggo sa search engine Ang usa ka importante nga bahin sa responsive web design mao ang CSS Media Queries.
Ang Media Queries nahisama sa gamay nga kondisyonal nga pamahayag sulod sa CSS file sa imong website, nga nagtugot kanimo sa pagtakda sa pipila ka mga lagda sa CSS nga makaapekto lamang sa higayon nga ang usa ka kondisyon matubag - sama sa kon ang gidak-on sa screen anaa sa ibabaw o sa ubos sa pipila nga mga sukdanan.
Media Queries in Action
Busa giunsa nimo paggamit ang Media Queries sa usa ka website? Ania ang usa ka yano nga ehemplo:
- Mahimo kang magsugod sa usa ka maayong pagkahan-ay nga dokumento sa HTML nga wala'y bisan unsang mga estilo sa visual (nga mao ang CSS alang sa)
- Diha sa imong CSS file, magsugod ka sama sa kasagaran nga imong buhaton pinaagi sa pag-istilo sa panid ug pagpahimutang sa usa ka baseline kon unsaon nga makita ang website. Giingon nga gusto nimo nga ang gidak-on sa letra sa panid nga 16 ka pixel, mahimo nimo isulat kining CSS: body {font-size: 16px; }
- Karon, mahimo nimong palig-onon ang gidak-on sa font alang sa mas dako nga mga screen nga may igo nga real estate sa pagbuhat sa ingon. Dinhi diin gipadali ang Media Queries. Ikaw magsugod sa usa ka Media Query nga sama niini: @media screen ug (min-width: 1000px) {}
- Kini mao ang syntax sa usa ka Media Query. Kini nagsugod sa @media aron sa pagtukod sa Media Query mismo. Dayon imong gibutang ang "tipo sa media", nga niining kasoha mao ang "screen". Kini magamit sa mga desktop computer screens, tablets, phones, ug uban pa. Sa katapusan, imong tapuson ang Media Query sa "feature sa media". Sa among pananglitan sa ibabaw, kana mao ang "mid-width: 1000px". Kini nagpasabot nga ang Media Query magpahigayon alang sa mga pasundayag nga adunay gilapdon nga 1000 ka pixel ang gilapdon.
- Human niini nga mga elemento sa Media Query, imong idugang ang usa ka pag-abli ug pagsira sa curly brace susama sa imong buhaton sa bisan unsa nga normal nga lagda sa CSS.
- Ang katapusang lakang sa usa ka Media Query mao ang pagdugang sa mga lagda sa CSS nga gusto nimo nga gamiton sa higayon nga kini nga kondisyon matuman. Gidugang nimo ang mga lagda sa CSS sa tunga sa mga curly brace nga naglangkob sa Media Query, sama niini: @media screen ug (min-width: 1000px) {body {font-size: 20px; }
- Kon ang mga kondisyon sa Media Query nahimamat (ang browser window dili moubos sa 1000 ka pixel ang gilapdon), kini nga estilo sa CSS mo epekto, nga mag-usab sa gidak-on sa font sa atong site gikan sa 16 ka pixel nga atong gitukod sa orihinal nga bag-ong kantidad nga 20 ka pixel.
Pagdugang og mga Estilo
Mahimo nimong ibutang ang daghang mga lagda sa CSS sulod niining Media Query kung gikinahanglan aron ma-adjust ang biswal nga dagway sa imong website. Pananglitan, kung gusto nimo nga dili lang madugangan ang gidak-on sa font nga 20 ka pixel, apan usab usba ang kolor sa tanan nga mga parapo ngadto sa itom (# 000000), mahimo nimo kini idugang:
@media screen ug (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Pagdugang sa More Query sa Media
Dugang pa, mahimo ka makadugang sa dugang nga Media Queries alang sa matag mas dako nga gidak-on, pagdugang niini sa imong style sheet nga sama niini:
@media screen ug (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen ug (min-width: 1400px) {body {font-size: 24px; }}Ang unang Media Queries magpatid sa 1000 pixel ang gilapdon, nga mag-usab sa gidak-on sa font sa 20 ka pixel. Unya, sa higayon nga ang browser anaa sa ibabaw sa 1400 ka pixel, ang gidak-on sa font mag-usab pag-usab ngadto sa 24 ka pixel. Mahimo nimo madugang ang daghang Media Queries kon gikinahanglan alang sa imong partikular nga website.
Min-Lap ug Max-Lapad
Kasagaran adunay duha ka mga paagi sa pagsulat sa Media Queries - pinaagi sa paggamit sa "min-width" o uban sa "max-width". Sa pagkakaron, nakita na nato ang "min-width" nga aksyon. Kini ang hinungdan sa pagpatuman sa Media Queries sa dihang ang usa ka browser moabut sa dili mokubos sa minimum nga gilapdon. Busa ang usa ka pangutana nga naggamit sa "min-width: 1000px" magamit kung ang browser labing menos 1,000 ka pixel ang gilapdon. Kini nga estilo sa Media Query gigamit sa dihang ikaw nagtukod og usa ka site sa "mobile-first" nga paagi.
Kung gigamit nimo ang "max-width", kini naglihok sa sukwahi nga paagi. Ang usa ka Media Query sa "max-width: 1000px" magamit sa higayon nga ang browser nahulog ubos niini nga gidak-on.
Mahitungod sa Tigulang nga mga Browser
Ang usa ka hagit sa Media Queries mao ang ilang kakulang sa suporta sa mas karaan nga mga bersyon sa Internet Explorer. Maayo na lang, adunay mga polyfills nga magamit nga makapugong sa suporta alang sa Media Queries sa mga daan nga mga browsers, nga magamit nimo kini sa mga website karon bisan pa sa pagseguro nga ang pagpasundayag sa site nga dili makita sa daan nga browser software.
Gi-edit ni Jeremy Girard sa 1/24/17