Ang syntax para sa parehong min-lapad at max-lapad na mga query sa media
Ang tumutugon sa disenyo ng web ay isang diskarte sa pagtatayo ng mga webpage kung saan ang mga pahina ay maaaring mag-dynamic na baguhin ang kanilang layout at hitsura batay sa laki ng screen ng bisita . Ang mga malalaking screen ay maaaring makatanggap ng isang layout na angkop sa mga mas malaking display habang ang mga mas maliliit na device, tulad ng mga mobile phone, ay maaaring makatanggap ng parehong website na naka-format sa isang paraan na angkop para sa mas maliit na screen. Ang diskarte na ito ay nagbibigay ng isang mas mahusay na karanasan ng gumagamit para sa lahat ng mga gumagamit at maaari itong kahit na makatulong na mapabuti ang ranggo sa search engine . Ang isang mahalagang bahagi ng tumutugon sa disenyo ng web ay CSS Media Query.
Ang mga Query ng Media ay tulad ng maliit na kondisyonal na pahayag sa loob ng CSS file ng iyong website, na nagbibigay-daan sa iyo upang magtakda ng ilang mga panuntunan sa CSS na makakaapekto lamang kapag naabot ang isang partikular na kondisyon - tulad ng isang sukat ng screen sa itaas o sa ibaba ng ilang mga limitasyon.
Mga Tanong sa Media sa Pagkilos
Kaya paano mo ginagamit ang Mga Query sa Media sa isang website? Narito ang isang simpleng halimbawa:
- Magsisimula ka sa isang mahusay na nakabalangkas na dokumento ng HTML na walang anumang visual na estilo (iyon ay kung ano ang CSS ay para sa)
- Sa iyong CSS file, magsisimula ka tulad ng karaniwan mong ginagawa sa pamamagitan ng estilo ng pahina at pagtatakda ng baseline para sa hitsura ng website. Sabihing gusto mo ang laki ng font ng pahina na 16 pixels, maaari mong isulat ang CSS: body {font-size: 16px; }
- Ngayon, maaaring gusto mong palakihin ang laki ng font para sa mas malaking mga screen na may sapat na real estate upang magawa ito. Ito ay kung saan ang Mga Query sa Media ay pumasok. Magsisimula ka ng isang Media Query tulad nito: @media screen at (min-width: 1000px) {}
- Ito ang syntax ng isang Media Query. Nagsisimula ito sa @media upang itatag ang Media Query mismo. Susunod na itinakda mo ang "uri ng media", na sa kasong ito ay "screen". Nalalapat ito sa mga screen ng desktop computer, tablet, phone, atbp. Sa wakas, tinatapos mo ang Media Query na may "tampok na media". Sa aming halimbawa sa itaas, iyon ay "mid-width: 1000px". Nangangahulugan ito na ang Media Query ay magpapasya para sa mga nagpapakita na may minimum na lapad ng 1000 pixel ang lapad.
- Matapos ang mga elemento ng Media Query, idagdag mo ang isang pambungad at pagsasara ng kulot na brace katulad ng kung ano ang iyong gagawin sa anumang normal na panuntunan sa CSS.
- Ang pangwakas na hakbang sa isang Media Query ay upang idagdag ang mga panuntunan ng CSS na gusto mong ilapat sa sandaling natugunan ang kundisyong ito. Nagdagdag ka ng mga panuntunan sa CSS sa pagitan ng mga kulot na tirante na bumubuo sa Media Query, tulad nito: @media screen at (min-width: 1000px) {body {font-size: 20px; }
- Kapag natugunan ang mga kondisyon ng Media Query (ang window ng browser ay hindi bababa sa 1000 pixel ang lapad), magkakaroon ang estilo ng CSS na ito, baguhin ang laki ng font ng aming site mula sa 16 na pixel na itinatag namin sa orihinal sa aming bagong halaga ng 20 pixel.
Pagdaragdag ng Higit pang mga Estilo
Maaari kang maglagay ng maraming mga panuntunan sa CSS sa loob ng Media Query na ito kung kinakailangan upang ayusin ang visual na hitsura ng iyong website. Halimbawa, kung nais mong hindi lamang madagdagan ang laki ng font sa 20 pixel, ngunit baguhin din ang kulay ng lahat ng mga talata sa itim (# 000000), maaari mong idagdag ito:
@media screen at (min-lapad: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Pagdaragdag ng Higit pang Mga Query sa Media
Bukod pa rito, maaari kang magdagdag ng higit pang Mga Query sa Media para sa bawat mas malaking laki, idaragdag ang mga ito sa iyong style sheet na katulad nito:
@media screen at (min-lapad: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen at (min-width: 1400px) {body {font-size: 24px; }}Ang unang Mga Query sa Media ay magpapasya sa 1000 pixel wide, na binabago ang laki ng font sa 20 pixel. Pagkatapos, kapag ang browser ay nasa itaas na 1400 pixels, ang laki ng font ay magbabago muli sa 24 na pixel. Maaari kang magdagdag ng maraming Mga Query sa Media kung kinakailangan para sa iyong partikular na website.
Min-Lap at Max-Lap
Sa pangkalahatan mayroong dalawang paraan upang isulat ang Mga Query sa Media - sa pamamagitan ng paggamit ng "min-width" o sa "max-width". Sa ngayon, nakita natin ang "min-width" sa pagkilos. Ito ay nagiging sanhi ng mga Media Query na magkabisa kapag naabot na ng isang browser ang hindi bababa sa minimum na lapad. Kaya ang isang query na gumagamit ng "min-width: 1000px" ay nalalapat kapag ang browser ay hindi bababa sa 1000 pixel ang lapad. Ang estilo ng Media Query na ito ay ginagamit kapag nagtatayo ka ng isang site sa isang "mobile-first" na paraan.
Kung gumagamit ka ng "max-width", ito ay gumagana sa kabaligtaran. Ang isang Media Query ng "max-width: 1000px" ay nalalapat sa sandaling bumagsak ang browser sa sukat na ito.
Tungkol sa Mga Lumang Mga Browser
Ang isang hamon sa Mga Query sa Media ay ang kanilang kakulangan ng suporta sa mga mas lumang bersyon sa Internet Explorer. Sa kabutihang palad, may mga magagamit na polyfills na makakapag-patch ng suporta para sa Mga Query ng Media sa mga mas lumang mga browser, na nagpapahintulot sa iyo na gamitin ang mga ito sa mga website ngayon habang tinitiyak na ang pagpapakita ng site na iyon ay hindi mukhang nasira sa mas lumang software ng browser.
Na-edit ni Jeremy Girard noong 1/24/17