Ang isa sa mga pangunahing gawain sa adaptive na layout ay ang pag-scale ng mga larawan (kabilang ang mga background) upang maipakita ang mga ito nang tama sa mga device na may iba't ibang mga resolution ng screen.
May mga larawan sa tag img Ito ay simple: kapag itinakda mo ang lapad bilang isang porsyento, ang taas ay awtomatikong mai-scale. Ang pamamaraang ito ay hindi mailalapat sa mga larawan sa background.
Ang trick na ito ay upang itakda ang halaga ng porsyento ng padding ( padding) elemento. Ang pamamaraan ay unang nai-publish sa isang lumang artikulo sa blog na A List Apart, ngunit gumagana pa rin ito nang maayos.
Ipagpalagay natin na meron larawan sa background 800 by 450 pixels, at kailangan mong gawin itong background na may fixed aspect ratio na 16:9. Ginagamit ng code sa ibaba para sa indentation px, ngunit lahat ay gagana sa em. Mayroon ding HTML5 figure element; para gumana ito ng tama sa mga mas lumang browser, maaari mong gamitin ang HTML5 shiv .
Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )
Pagdaragdag ng background
Ang nagreresultang elemento ay sumusukat gaya ng inaasahan, ngunit kung magdadagdag ka ng larawan sa background, ang resulta ay hindi magiging napakaganda. Gamit ang attribute laki ng background: takip. Sa kasamaang palad, ang pamamaraang ito ay hindi gumagana sa Internet Explorer 8. Upang malutas ang problemang ito, inilalagay namin ang background gamit ang background-posisyon. Ang larawan sa background ay dapat na hindi bababa sa lapad ng max-width elemento. Kung hindi, ang larawan ay i-crop.
Div.column ( /* Ang larawan sa background ay dapat na 800px ang lapad */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/ 8 */ )
Sabihin nating mayroon kang malaking larawan sa background na mukhang maganda sa desktop. Ngunit sa isang mobile device ito ay magiging masyadong maliit, kaya ang tamang desisyon babawasan ang lapad ng background.
Halimbawa, isang imahe na may lapad na 800 by 200 pixels (4:1) sa maliit na screen, na may lapad na 300 pixels, ay dapat bawasan sa 150 pixels (2:1). Bilangin natin ang mga katangian taas At padding-top:
Ipinapakita ng figure ang aspect ratio ng background na larawan sa iba't ibang lapad. Ang slope ng graph ay tumutugma sa katangian padding-top, simula taas - sa katangian taas. Ang resultang code ay:
Div.column ( /* Ang larawan sa background ay dapat na 800px ang lapad */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120px; /* start height */ background- larawan: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )
Paggamit ng SCSS para sa Pagkalkula
Mga Katangian padding-top at taas maaaring awtomatikong kalkulahin gamit ang mga preprocessor tulad ng SCSS. Isang halimbawa nito:/* Kalkulahin ang ratio ng fluid batay sa dalawang dimensyon (lapad/taas) */ @mixin fluid-ratio($large-size, $small-size) ($width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height- malaki - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; taas: $height ; laki ng background: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Magkakaroon ng fluid ratio ang elementong ito mula 4:1 sa 800px hanggang 2:1 sa 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )
Naisulat ko na na ang gayong elemento sa site bilang isang larawan sa background ay karaniwan na ngayon. Kadalasan ito ay matatagpuan sa mga pahina ng pagbebenta, kung saan ito ay matatagpuan sa header. Mukhang napakaganda, kung, siyempre, ito ay napakataas na kalidad at akma nang maayos sa tema ng site. Sa pamamagitan ng paraan, bilang isang bonus sa artikulong ito, sa dulo sasabihin ko sa iyo kung saan makakakuha ng mataas na kalidad na mga imahe nang libre at sa parehong oras ay gagawin sila ng mga propesyonal.
Narito kung ano pa ang tungkol sa tumutugon na mga larawan ng website:
Kung gusto mong gawing tunay na kakaiba ang iyong background, inirerekumenda ko ang sumusunod na artikulo:
Tingnan kung ano ang hitsura nito tunay na halimbawa:
I-download
Sa ibaba makikita mo kung paano umaangkop ang larawan sa background iba't ibang mga aparato:
Paano gumawa ng tumutugon na larawan sa background para sa isang website?
Bahagi ng HTML
Para sa halimbawang ito magtatakda kami ng background na larawan para sa katawan, ngunit magagawa mo ito sa katulad na paraan para sa anumang bloke sa pahina. Samakatuwid, walang supernatural sa istruktura ng HTML:
Bahagi ng CSS
Ang natitira na lang ay itakda ang mga kinakailangang katangian sa style file para gawin ang aming nilayon - isang adaptive na larawan sa background para sa site:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | katawan ( /* Path sa image relative ang file na ito */ background-image: url ( ../images/background-photo.jpg) ; /* Palaging igitna ang larawan nang patayo at pahalang */ background-position : center center ; /* Huwag paganahin ang pag-uulit ng larawan */ background-repeat : no-repeat ; /* Ayusin ang imahe - nananatili ito sa lugar kapag nag-scroll sa window */ background-attachment: naayos; /* Ang imahe ay i-scale depende sa laki ng lalagyan */ laki ng background : takip; /* Kulay ng background ng larawan na ipapakita hanggang sa mag-load ang larawan */ kulay ng background : #464646 ; /* Katumbas na shorthand * background: url(background-photo.jpg) center center cover no-repeat fixed; */ } |
Ang lahat ng mga linya ay nagkomento, kaya sa palagay ko ay hindi magkakaroon ng anumang mga problema sa code na ito.
Ngunit hindi iyon ang lahat ng code. Dahil ang bilis mobile Internet ay limitado, kaya kailangan nating i-optimize ang page sa mga tuntunin ng bilis ng paglo-load. May isang imahe sa pahina na medyo malaki. Ngunit magagawa mo ito upang ang ibang larawan, na mas maliit, ay na-load para sa mga mobile device.
Gagamit kami ng Media Query, na nagbibigay-daan sa iyong magtakda ng mga indibidwal na katangian para sa isang arbitrary na lapad ng screen:
Ano'ng nagawa natin? Kung ang lapad ng window ng browser sa device ay mas mababa sa 767 pixels, gagamit kami ng ibang larawan. Napakasimple ng lahat.
Ang isa sa mga pangunahing gawain sa adaptive na layout ay ang pag-scale ng mga larawan (kabilang ang mga background) upang maipakita ang mga ito nang tama sa mga device na may iba't ibang mga resolution ng screen.
May mga larawan sa tag img Ito ay simple: kapag itinakda mo ang lapad bilang isang porsyento, ang taas ay awtomatikong mai-scale. Ang pamamaraang ito ay hindi mailalapat sa mga larawan sa background.
Ang trick na ito ay upang itakda ang halaga ng porsyento ng padding ( padding) elemento. Ang pamamaraan ay unang nai-publish sa isang lumang artikulo sa blog na A List Apart, ngunit gumagana pa rin ito nang maayos.
Sabihin nating mayroon kang larawan sa background na 800 by 450 pixels, at gusto mo itong gawing background na may nakapirming aspect ratio na 16:9. Ginagamit ng code sa ibaba para sa indentation px, ngunit lahat ay gagana sa em. Mayroon ding HTML5 figure element; para gumana ito ng tama sa mga mas lumang browser, maaari mong gamitin ang HTML5 shiv .
Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )
Pagdaragdag ng background
Ang nagreresultang elemento ay sumusukat gaya ng inaasahan, ngunit kung magdadagdag ka ng larawan sa background, ang resulta ay hindi magiging napakaganda. Gamit ang attribute laki ng background: takip. Sa kasamaang palad, ang pamamaraang ito ay hindi gumagana sa Internet Explorer 8. Upang malutas ang problemang ito, inilalagay namin ang background gamit ang background-posisyon. Ang larawan sa background ay dapat na hindi bababa sa lapad ng max-width elemento. Kung hindi, ang larawan ay i-crop.
Div.column ( /* Ang larawan sa background ay dapat na 800px ang lapad */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/ 8 */ )
Sabihin nating mayroon kang malaking larawan sa background na mukhang maganda sa desktop. Ngunit sa isang mobile device ito ay magiging masyadong maliit, kaya ang tamang solusyon ay ang bawasan ang lapad ng background.
Halimbawa, ang isang imahe na may lapad na 800 by 200 pixels (4:1) sa isang maliit na screen, na may lapad na 300 pixels, ay dapat bawasan sa 150 pixels (2:1). Bilangin natin ang mga katangian taas At padding-top:
Ipinapakita ng figure ang aspect ratio ng background na larawan sa iba't ibang lapad. Ang slope ng graph ay tumutugma sa katangian padding-top, simula taas - sa katangian taas. Ang resultang code ay:
Div.column ( /* Ang larawan sa background ay dapat na 800px ang lapad */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120px; /* start height */ background- larawan: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )
Paggamit ng SCSS para sa Pagkalkula
Mga Katangian padding-top at taas maaaring awtomatikong kalkulahin gamit ang mga preprocessor tulad ng SCSS. Isang halimbawa nito:/* Kalkulahin ang ratio ng fluid batay sa dalawang dimensyon (lapad/taas) */ @mixin fluid-ratio($large-size, $small-size) ($width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height- malaki - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; taas: $height ; laki ng background: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Magkakaroon ng fluid ratio ang elementong ito mula 4:1 sa 800px hanggang 2:1 sa 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )
Sa tutorial na ito, pag-aaralan namin nang detalyado ang teknolohiya ng paglikha ng tumutugon na larawan sa background na sasakupin ang buong lugar ng pagtingin sa browser sa anumang resolusyon. At gagamitin namin ang CSS - ang background-size na property. Nang walang JavaScript:
HALIMBAWA
MAG-DOWNLOAD NG MGA PINAGMULAN
Mga halimbawa ng paggamit ng tumutugon na mga larawan sa background
Ngayon, ang mga site kung saan ang larawan sa background ay sumasaklaw sa buong ipinapakitang lugar ng pahina ay napakapopular.
Nasa ibaba ang ilan sa mga website na ito:
Sailing Collective
Digital Telepathy
Marianne Restaurant
Kung gusto mong makamit ang isang katulad na "hitsura" sa iyong proyekto, ikaw ay nasa tamang landas.
Pangunahing Konsepto
Narito ang aming plano sa laro.
Gamitin ang background-size na property para masakop ang buong viewport
Maaaring itakda ang CSS background-size na property sa cover . Ang halaga ng pabalat ay nagtuturo sa browser na awtomatiko at proporsyonal na sukatin ang larawan sa background sa haba at lapad upang ito ay manatiling katumbas ng o mas malaki kaysa sa lapad/taas ng viewport.
Paggamit ng media query upang makakuha ng mas maliit na bersyon ng isang background na larawan para sa mga mobile device
Upang bawasan ang oras ng paglo-load ng page sa maliliit na resolution ng screen, gagamit kami ng media query para makakuha ng mas maliit na bersyon ng background na larawan. Ngunit ito ay hindi kinakailangan at maaaring alisin. Ang teknolohiyang ito mahusay na gumagana nang wala ito.
Ngunit gayon pa man, ang paggamit ng mas maliliit na bersyon ng background para sa mga mobile device ay hindi isang masamang ideya, at ipapaliwanag ko kung bakit.
Ang larawang gagamitin sa halimbawa ay humigit-kumulang 5500 by 3600px ang laki.
Sa resolusyong ito, mayroon kaming kalamangan na nakakamit namin ang saklaw ng buong lugar ng panonood sa karamihan ng malawak na format na monitor na kasalukuyang ginagawa, ngunit ang kawalan ay ang laki ng larawan. Ito ay tungkol sa 1.7 MB.
Ang pag-iiwan ng napakaraming espasyo para sa paglo-load lamang ng isang larawan sa background ay hindi masyadong maganda magandang ideya sa anumang kaso, at sa kaso ng mga mobile device ito ay isang napakasamang ideya. Bilang karagdagan, ang naturang resolusyon ay hindi kailangan sa mga screen na may mababang resolusyon ( Sasabihin ko sa iyo ang higit pa tungkol dito mamaya).
Kaya. Magsimula na tayo.
HTML
Nasa ibaba ang lahat ng kailangan mo mula sa markup:
...Ang nilalaman ng iyong pahina...
Magtatalaga kami ng larawan sa background sa elemento ng katawan at sa gayon ay makakamit ang kumpletong saklaw ng background.
Gayunpaman, gagana ang diskarteng ito sa anumang block element (tulad ng div o form ). Kung sakaling ang lapad-taas ng iyong bloke na lalagyan ay maaaring ilipat, ang larawan sa background ay magre-resize din upang punan ang buong lalagyan.
CSS
Ipinapahayag namin ang mga katangian ng elemento ng katawan tulad ng sumusunod:
body ( /* Lokasyon ng background image */ background-image: url(images/background-photo.jpg); /* Ang background image ay nakasentro nang pahalang at patayo */ background-position: center center; /* Hindi umuulit ang background */ background-repeat: no-repeat; /* Ang background ay naayos sa viewport at samakatuwid ay hindi gumagalaw kapag ang taas ng content ay lumampas sa taas ng larawan */ background-attachment: fixed; /* Ang property na ito ay nagiging sanhi ng background upang baguhin ang sukat kapag nagbago ang laki ng naglalaman ng container */ background-size: cover; /* Kulay ng background na ipapakita kapag naglo-load ng background na larawan */ background-color: #464646; )
Ang pinakamahalagang value property sa listahang ito ay:
laki ng background: takip;
Ito ay nagkakahalaga ng pagbibigay pansin dito. Dito nangyayari ang himala. Ang pares ng value-property na ito ay nagtuturo sa browser na sukatin ang larawan sa background sa mga proporsyon na ang taas-lapad ay nananatiling katumbas o mas malaki kaysa sa taas-lapad ng elemento mismo. ( Sa aming kaso ang elementong ito- katawan.)
At dito lumitaw ang isang hindi kasiya-siyang sitwasyon sa pares ng halaga ng ari-arian. Sa kaso kapag ang larawan sa background ay magkakaroon ng mas mababang resolution kaysa sa mga sukat ng elemento ng katawan, at ito ay maaaring mangyari alinman kapag ang pahina ay ipinapakita sa mga screen mataas na resolution, o kapag mayroon kang toneladang nilalaman sa pahina, ang browser ay magpapahaba sa larawan.
At tulad ng alam mo, kapag inabot namin ang isang imahe na lampas sa aktwal na laki nito, nawawala ang kalidad ng larawan ( sa madaling salita, lumilitaw ang pixelation):
Kapag ang isang imahe ay ini-scale patungo sa orihinal na laki nito, ang kalidad ng imahe ay bumababa.
Huwag kalimutan ang tungkol dito kapag pumipili ng background. Sa halimbawa ng demo, gumagamit kami ng larawan na may sukat na 5500 by 3600px para sa malalaking screen, at samakatuwid sa kasong ito ay malabong mangyari ang isang katulad na bagay.
Upang matiyak na ang aming background ay nakahanay sa gitna, ipinahayag namin ang sumusunod:
background-posisyon: center center;
Itatakda nito ang mga scaling axes sa gitna ng viewport.
Narito ang gagawin natin. Itakda natin ang background-attachment property sa fixed para matiyak na mananatili ang larawan sa lugar kahit na mag-scroll pababa tayo sa page:
background-attachment: naayos;
Sa halimbawa ng demo isinama ko ang opsyon na " mag-download ng ilang nilalaman" upang maobserbahan mo ang gawi ng background kapag nag-i-scroll sa pahina.
Ang kailangan mo lang gawin ay i-download ang demo at mag-eksperimento nang kaunti sa mga katangian ng pagpoposisyon ( background-attachment at background-position ) upang makita kung paano nakakaapekto ang mga ito sa pag-scroll ng pag-uugali ng pahina at background.
Ang mga sumusunod na halaga ng ari-arian ay maliwanag.
CSS Shorthand
Sa itaas, para sa kalinawan, tinukoy ko nang buo ang mga katangian ng CSS.
At ito ang hitsura ng maikling bersyon:
body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )
Ang kailangan mo lang gawin ay baguhin ang halaga ng url sa landas patungo sa iyong larawan.
Opsyonal: media query para makakuha ng mas maliit na bersyon ng background na larawan
Para sa mga screen na mas mababa ang resolution, kakailanganin namin ng Photoshop na proporsyonal na bawasan ang resolution ng imahe sa 768 by 505px. Pinatakbo ko rin ito sa pamamagitan ng Smush.it upang bawasan ang laki ng file. Pinahintulutan nito ang laki na bawasan mula 1741 hanggang 114 kilobytes. Binawasan nito ang laki ng file ng 93%.
Huwag kang magkakamali, ngunit ang 114 kilobytes ay marami pa ring magagamit para sa ilang uri ng disenyo ng web. At ilo-load lang namin ang 114 kilobytes na iyon kung kinakailangan, dahil sa pagtingin sa mga istatistika, may mga trade-off na gagawin sa pagitan ng desktop at mobile na disenyo.
At narito ang mismong media query:
Ang pangunahing bahagi ng query ng media ay ang max-width: 767px property, na sa aming kaso ay nangangahulugan na kung ang viewport ng browser ay mas malaki kaysa sa 767px, isang malaking larawan ang ginagamit.
Ang downside sa paraang ito ay kung babaguhin mo ang browser window mula sa, halimbawa, 1200px hanggang 640px (o vice versa), makakakita ka ng kumikislap na screen habang naglo-load ang mas maliit o mas malaking larawan.
At bilang karagdagan, dahil sa ang katunayan na ang ilan mga mobile device maaaring gumana sa mas mataas na resolution - halimbawa, ang iPhone 5 na may Retina display na may resolution na 1136 by 640px, ang isang mas maliit na imahe ay magiging pangit.
Konklusyon
Ang lahat ng code na ginamit sa tutorial na ito ay matatagpuan sa GitHub.
Pagbati sa lahat na sabik na matuto tungkol sa adaptive na disenyo ng website. Sa publikasyong ito gusto kong sabihin sa iyo kung paano lumikha ng isang tumutugon na background ng website gamit ang mga tool sa CSS. Ngayon, dahil sa aktibong pag-unlad ng teknolohiya, ang kakayahang umangkop ay nasa uso.
Maraming may paggalang sa sarili na mga negosyante ang nag-uutos ng pagbuo ng mga cross-browser na serbisyo sa web, i.e. yaong, anuman ang laki ng device, ay magsasaayos ng nilalaman sa lapad at taas ng tab. Iyon ang dahilan kung bakit sa artikulong ito ay magsasalita ako tungkol sa mga query sa media at ang kanilang layunin, at magbibigay din ng isang halimbawa ng pagsubok. Well, simulan na natin ang debriefing!
Isang maliit na kasaysayan tungkol sa mga dynamic na mapagkukunan ng web
Nakakagulat, ang konsepto ng kakayahang tumugon o kakayahang umangkop ng disenyo ng web ay lumitaw kamakailan lamang. Noong 2010, unang ginamit ni Ethan Marcotte ang terminong ito sa isa sa kanyang mga gawa. Ito ang nagtulak sa kanya na maglabas ng aklat na tinatawag na "Responsive Web Design".
Ang prinsipyong ito ng layout ng web page ay lumitaw dahil sa pagtaas ng bilang iba't ibang uri mga device na may iba't ibang laki screen: mga personal na computer, tablet, laptop, atbp.
Bilang karagdagan, ngayon ang mga modernong smartphone ay nilagyan mataas na kalidad nagpapakita ng mga graphics at hindi mas mababa sa bilis ng Internet kaysa sa iba pang mga teknolohiya. Samakatuwid, araw-araw lumilitaw ang lahat maraming tao, na nakakuha ng moderno cellphone At sa mahabang panahon mag-hang up sa network sa pamamagitan nito.
At bilang resulta, halos bawat web resource ay may sariling mobile na bersyon.
Kaya ano ang ibig sabihin ng "tumutugon" na layout?
Ang adaptive layout ay isang paraan ng pagsulat ng isang web service na tumutukoy sa kung anong laki paparating na ang bintana pagbabago ng pagkakaayos ng mga bagay sa pahina. Ito ay itinakda gamit ang mga query sa media. Tingnan natin kung ano ito.
Ang paraan ng paggamit ng mga query sa media at mga bahagi nito
Para gumawa ng media query ( mediamga tanong) kailangan mong gumamit ng espesyal na salita @ media at ito ang mga patakaran.
Ang katagang ito ay talagang nagmula sa pangalan ng simbolo na @, na mas nakasanayan nating tawaging "aso". Susunod, inireseta ng developer ang ilang mga kundisyon ng dynamism, na tumutukoy sa uri ng teknolohiya, mga function ng media at kung minsan ay mga lohikal na operator.
Sa ibaba ay nag-attach ako ng isang talahanayan na naglilista ng mga pangunahing uri ng mga device.
| Uri ng device | Paliwanag |
| Lahat | Default na halaga. Gaya ng nahulaan mo, ginagamit ito para sa lahat ng uri ng device. |
| tv | Isinasaad na ang device ay isang TV. |
| screen | Screen ng monitor ng computer. |
| tty | Mga device na may nakapirming laki ng character. Kabilang dito ang mga terminal, teletype, at iba't ibang device na may mga limitasyon sa screen. |
| Ang layout ay binuo para sa mga aparato sa pag-print. | |
| projection | Ginagamit para sa mga tagapagtanggol. |
| handheld | Mga portable na device (mga telepono, tablet, atbp.) |
| braille | Isinasaad na ang mapagkukunan ay gagamitin ng mga bulag. Ang batayan ng naturang mga teknolohiya ay ang Braille system. |
| naka-emboss | Mga printer na gumagamit ng system sa itaas. |
| talumpati | Kabilang dito ang lahat ng serbisyo sa pagsasalita: mga browser, program na nagbabasa ng text, atbp. |
Ngayon gusto kong sabihin sa iyo ang tungkol sa mga lohikal na operator na ginagamit sa mga query sa media at ang kanilang pangunahing layunin.
Kaya mayroong 3 pangunahing lohikal na operator.
Magsimula tayo sa hindi. Ginagamit para i-negate ang mga ari-arian. Tandaan na hindi mababa ang priyoridad at samakatuwid ay huling pinaandar sa pila ng pahayag. Halimbawa ng deklarasyon ng kahilingan:
@media handheld at (hindi screen) ( ... )
Inilalarawan din ng unang halimbawa ang operator at. Ito ay responsable para sa lohikal na AT, i.e. pinagsasama ang mga nakalistang parameter at inilalapat ang tinukoy na kundisyon sa kanila.
Kung kailangan mong magtakda ng mga adaptive na kondisyon para sa mga mas lumang bersyon ng browser http://site/brauzeryi-vebmastera/kakoy-brauzer-luchshe.html, dapat mong gamitin ang salita lamang. Halimbawa ng pagsisimula:
@media only screen at (hindi print) ( ... )
Napansin ng mga matulungin na mambabasa na wala akong isinulat tungkol sa lohikal O, at hindi mo magagawa nang walang ganoong operator. Kaya, sa mga query sa media, ginagawa ng kuwit ang function na ito. Halimbawa:
@media screen at (max-width: 900px), print at (orientation: portrait) ( ... )
Oras na para pag-usapan ang mga function. Marami sila, kaya ililista ko ang mga pangunahing. Kung gusto mong pamilyar sa lahat ng umiiral na mga function ng media, pagkatapos ay maghanap ng opisyal na dokumentasyon o iba pang mga artikulo na naglilista ng lahat ng posibleng opsyon.
Upang magsimula, nais kong tandaan na ang pangunahing bahagi ng mga pag-andar bilang bahagi ng kanilang pangalan ay may mga prefix min o max. Oo, kung tinukoy
max-height:840px,
pagkatapos ay nalalapat ang mga kundisyon sa taas ng window na mas mababa kaysa sa tinukoy na dimensyon. At kung ito ay nakasulat
mnasa taas: 950px,
nangangahulugan ito na ang taas ng window ay dapat na mas malaki kaysa sa tinukoy na laki.
Kaya, para sa mga device tulad ng tv, print, tty, screen, handheld, at projection mayroong mga sumusunod na function:
| Pangalan | Layunin | Halimbawa |
| kulay (min-color, max-color) | Isinasaad ang bilang ng mga bit sa bawat color channel. Halimbawa, kung ang numero 3 ay tinukoy, kung gayon kabuuang bilang Ang mga kulay ay 512. | Para sa mga color display: @media screen at (kulay) (div ( background: ginto; )) Para sa 512 na kulay: @media screen at (min-kulay:3) ( div ( background: pula; )) |
| oryentasyon | Naglalarawan hitsura windows: landscape view ng page (landscape) o portrait view (portrait). | @media screen at (orientation: landscape) ( div( color: #F8F8FF; )) @media screen at (orientation: portrait) ( div ( color: #FDF5E6;)) |
| monochrome (min-monochrome, max-monochrome) | Tinukoy para sa mga monochrome (isang kulay) na device. Kapag tinukoy ang isang numero, itinakda mo kung gaano karaming mga bit ang inilalaan sa bawat 1 pixel | @media print at (monochrome) ( body ( font-family: Arial, sant-serif; ) h1, h3, p ( color: #000; )) |
Para sa lahat ng media, maliban sa speech technology, ang mga sumusunod na media function ay ginagamit:
Halimbawa ng tumutugon na web page
Bilang halimbawa, gumawa ako ng isang simpleng pahina na nagbabago sa laki ng pahina at nagbabago sa kulay ng pamagat ng site.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
Mga lihim ng espasyoBalita ng mga natuklasang siyentipikoUnang balitaPangalawang balita |