Paano Gumamit ng Mga Query ng Media sa HTML at CSS upang Lumikha ng Mga tumutugong Website

Paano Gumamit ng Mga Query ng Media sa HTML at CSS upang Lumikha ng Mga tumutugong Website

Kung nais mong bumuo ng mga website / web application, kung gayon ang pag-alam kung paano lumikha ng mga tumutugong disenyo ay mahalaga sa iyong tagumpay.





Noong nakaraan, ang paglikha ng mga website na umangkop nang maayos sa iba't ibang laki ng screen ay isang karangyaan na kinailangan ng mga may-ari ng website na humiling mula sa isang developer. Gayunpaman, ang pagtaas sa paggamit ng mga smartphone at tablet ay gumawa ngayon ng tumutugong disenyo na isang pangangailangan sa mundo ng pag-unlad ng software.



Ang paggamit ng mga query sa media ay ibababa ang pinakamahusay na paraan upang matiyak na ang iyong website / web app ay lilitaw nang eksakto kung paano mo ito nais sa bawat aparato.





Pag-unawa sa Disenyong Tumutugon

Sa madaling sabi, nakikipag-usap ang tumutugong disenyo sa paggamit ng HTML / CSS upang lumikha ng isang layout ng website / web app na umaangkop sa iba't ibang mga laki ng screen. Sa HTML / CSS mayroong ilang iba't ibang mga paraan upang makamit ang kakayahang tumugon sa isang disenyo ng website:

  • Gumagamit ng mga rem at em unit sa halip na mga pixel (px)
  • Ang pagtatakda ng viewport / scale ng bawat webpage
  • Paggamit ng mga query sa media

Ano ang Mga Query sa Media?

Ang isang query sa media ay isang tampok ng CSS na inilabas sa bersyon ng CSS3. Sa pagpapakilala ng bagong tampok na ito, ang mga gumagamit ng CSS ay nagkakaroon ng kakayahang ayusin ang pagpapakita ng isang webpage batay sa taas ng aparato / screen, lapad, at oryentasyon (tanawin o portrait mode).



Magbasa nang higit pa: Ang Mahalagang CSS3 Properties Cheat Sheet

Ang mga query sa media ay nagbibigay ng isang balangkas para sa paglikha ng code nang isang beses at paggamit nito ng maraming beses sa buong iyong programa. Maaaring hindi ito masyadong kapaki-pakinabang kung bumubuo ka ng isang website na mayroon lamang tatlong mga web page, ngunit kung nagtatrabaho ka para sa isang kumpanya na may daan-daang iba't ibang mga web page-ito ay napatunayan na isang napakalaking tagatipid ng oras.



Paggamit ng Mga Query sa Media

Mayroong maraming iba't ibang mga bagay na kailangan mong isaalang-alang kapag gumagamit ng mga query sa media: istraktura, pagkakalagay, saklaw, at pag-uugnay.

Ang Istraktura ng Mga Query ng Media

Halimbawa ng isang Straktura ng Media Query


@media only/not media-type and (expression){
/*CSS code*/
}

Kasama sa pangkalahatang istraktura ng isang query sa media ang:



  • Ang keyword na @media
  • Ang hindi / tanging keyword
  • Isang uri ng media (na maaaring maging screen, print, o pagsasalita)
  • Ang keyword at
  • Isang natatanging ekspresyon na nakapaloob sa mga panaklong
  • Ang CSS code na nakapaloob sa isang pares ng bukas at malapit na mga kulot na brace.

Kaugnay: Paggamit ng CSS upang Mag-format ng Mga Dokumento para sa Pag-print

Halimbawa ng isang Query ng Media Na May Tanging Keyword


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Nalalapat ang halimbawa sa itaas ng estilo ng CSS (partikular ang isang kulay na kulay ng background) sa mga screen lamang ng aparato na may lapad na 450px at sa ilalim — kaya karaniwang mga smartphone. Ang tanging keyword ay maaaring mapalitan ng hindi keyword at pagkatapos ang estilo ng CSS sa query sa media sa itaas ay nalalapat lamang sa pag-print at pagsasalita.

Gayunpaman, bilang default, nalalapat ang isang pangkalahatang pahayag ng query sa media sa lahat ng tatlong uri ng media kaya hindi na kailangang tukuyin ang isang uri ng media maliban kung ang hangarin ay ibukod ang isa o higit pa sa mga ito.

Halimbawa ng Default na Media Query


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Ang Pagkalagay ng Mga Query ng Media

Ang isang query sa media ay isang pag-aari ng CSS; maaari itong, samakatuwid, magamit lamang sa loob ng wikang pang-istilo. Mayroong tatlong magkakaibang paraan upang maisama ang CSS sa iyong code; gayunpaman, dalawa lamang sa mga pamamaraang iyon ang nagbibigay ng praktikal na paraan upang maisama ang mga query sa media sa iyong mga programa — panloob o panlabas na CSS.

Kasama sa panloob na pamamaraan ang pagdaragdag ng tag sa tag ng HTML file, at paglikha ng query ng media sa loob ng mga parameter ng tag.

Ang panlabas na pamamaraan ay nagsasangkot ng paglikha ng isang query sa media sa isang panlabas na file na CSS at pag-uugnay nito sa iyong HTML file sa pamamagitan ng tag.

Ang Saklaw ng Mga Query ng Media

Ginamit man ang mga query sa media sa pamamagitan ng panloob o panlabas na CSS, mayroong isang pangunahing aspeto ng wika ng estilo na maaaring makaapekto sa kung paano gumana ang isang query sa media. Ang CSS ay may isang order ng precedence na panuntunan. Kapag gumagamit ng isang tagapili ng CSS, o sa kasong ito isang query sa media, ang bawat bagong query sa media na naidagdag sa mga file na override ng CSS (o inuuna ang higit) sa isa na nauna.

Ang default na code ng query ng media na mayroon kami sa itaas ay nagta-target ng mga smartphone (lapad na 450px at mas mababa), kaya kung nais mong magtakda ng ibang background para sa mga tablet maaari mong isipin na maaari mong idagdag lamang ang sumusunod na code sa iyong dati nang CSS file.

Halimbawa ng Query ng Query ng Media


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Ang problema lamang ay, dahil sa pagkakasunud-sunod ng pag-uunahan, ang mga tablet ay magkakaroon ng isang pulang kulay sa background at ang mga smartphone ay magkakaroon din ng isang pulang kulay ng background dahil ang 450px at sa ilalim ay nasa ilalim ng 800px.

Ang isang paraan upang malutas ang maliit na problemang ito ay upang idagdag ang query ng media para sa mga tablet bago ang para sa mga smartphone; ire-override ng huli ang nauna at magkakaroon ka ng mga smartphone na may asul na kulay ng background at mga tablet na may pulang kulay sa background.

Gayunpaman, mayroong isang mas mahusay na paraan upang makamit ang magkakahiwalay na estilo para sa mga smartphone at tablet nang hindi nag-aalala tungkol sa pagkakasunud-sunod ng pagkauna. Ito ay isang tampok ng mga query sa media na kilala bilang detalye ng saklaw, kung saan maaaring lumikha ang developer ng isang query sa media na may maximum at minimum na lapad (ang saklaw).

Ang Query ng Tablet Media Na May Halimbawang Halimbawa


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Sa halimbawang nasa itaas ang paglalagay ng mga query sa media sa loob ng isang styleheet ay naging walang katuturan dahil ang disenyo para sa mga tablet at smartphone ay nagta-target ng dalawang magkakahiwalay na koleksyon ng lapad.

Kung hindi mo nais na i-embed ang mga query ng media sa iyong CSS code, mayroong isang kahaliling pamamaraan na maaari mong gamitin. Kasama sa pamamaraang ito ang paggamit ng mga query sa media sa tag ng isang HTML file, kaya sa halip na magkaroon ng isang napakalaking styleheet na naglalaman ng mga kagustuhan sa istilo para sa mga smartphone, tablet, at computer — maaari kang gumamit ng tatlong magkakahiwalay na mga CSS file at likhain ang iyong mga query sa media sa tag.

Ang tag ay isang elemento ng HTML na ginagamit upang mag-import ng estilo ng CSS mula sa isang panlabas na styleheet. Ang tag na ito ay may isang pagmamay-ari ng media na gumagana sa parehong paraan tulad ng isang query sa media sa CSS.




href='tablet.css'>


Ang code sa itaas ay dapat ilagay sa tag ng iyong HTML file. Ngayon ang kailangan mo lang gawin ay lumikha ng tatlong magkakahiwalay na mga file ng CSS na may pangunahing mga pangalan ng file. CSS, tablet.css, at smartphone.css-pagkatapos ay lumikha ng tukoy na disenyo na nais mo para sa bawat aparato.

Ang estilo sa pangunahing file ay nalalapat sa lahat ng mga screen na may lapad na mas malaki sa 800px, ang istilo sa file ng tablet ay nalalapat sa lahat ng mga screen na may lapad sa pagitan ng 450px at 801px, at ang istilo sa file ng smartphone ay mailalapat sa lahat ng mga screen sa ibaba 451px.

kung paano mapasimulan ang windows windows 10

Ngayon Mayroon kang Mga Tool upang Lumikha ng Mga tumutugong Disenyo

Kung nagawa mo ito sa pagtatapos ng artikulong ito natutunan mo kung ano ang tumutugong disenyo at kung bakit ito kapaki-pakinabang. Maaari mo na ngayong kilalanin at gamitin ang mga query sa media sa CSS at HTML file. Bilang karagdagan, ipinakilala sa iyo ang pagkakasunud-sunod ng pagkauna sa CSS at nakita kung paano ito makakaapekto sa kung paano gumana ang iyong mga query sa media.

Credit sa Larawan: Negatibong Puwang / Pexels

Magbahagi Magbahagi Mag-tweet Email Paano Magtakda ng isang Imahe sa Background sa CSS

Ang CSS ay isang malakas na tool para sa estilo ng mga webpage. Ang pagkatuto kung paano maglagay ng isang imahe sa background ay nagtuturo sa iyo ng maraming mga pangunahing kaalaman sa CSS.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Pag-unlad sa Web
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Kadeisha Kean(21 Artikulo Nai-publish)

Si Kadeisha Kean ay isang Full-Stack Software Developer at Teknikal / Teknikal na Manunulat. Siya ay may natatanging kakayahan na gawing simple ang ilan sa mga pinaka kumplikadong teknolohikal na konsepto; paggawa ng materyal na maaaring madaling maunawaan ng anumang baguhan sa teknolohiya. Siya ay madamdamin tungkol sa pagsusulat, pagbuo ng mga kagiliw-giliw na software, at paglalakbay sa buong mundo (sa pamamagitan ng mga dokumentaryo).

Higit pa Mula kay Kadeisha Kean

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe