Atbildīgs web dizains ir pieeja, lai izveidotu tīmekļa lapas, kurās šīs lapas var dinamiski mainīt izkārtojumu un izskatu, pamatojoties uz apmeklētāja ekrāna izmēru. Lielie ekrāni var saņemt izkārtojumu, kas piemērots lielākajiem displejiem, bet mazākas ierīces, piemēram, mobilie tālruņi, var saņemt to pašu tīmekļa vietni, kas ir formatēta tādā veidā, kas ir piemērots šim mazākam ekrānam. Šī pieeja nodrošina labāku lietotāju pieredzi visiem lietotājiem un pat var palīdzēt uzlabot meklētājprogrammu klasifikāciju. Svarīga web dizaina daļa ir CSS mediju vaicājumi.
Mediju vaicājumi ir tādi paši nelieli nosacījumu izteikumi jūsu tīmekļa vietnes CSS failā, kas ļauj jums iestatīt dažus CSS noteikumus, kas stāsies spēkā tikai tad, ja ir izpildīts noteikts nosacījums - piemēram, ja ekrāna izmērs ir virs vai zem noteiktiem sliekšņiem.
Mediju vaicājumi darbībā
Tātad, kā jūs izmantojat vietnes mediju vaicājumus? Šeit ir ļoti vienkāršs piemērs:
- Jūs varētu sākt ar labi strukturētu HTML dokumentu bez jebkāda vizuāla stila (tas ir, kāda ir CSS)
- Jūsu CSS failā jūs sāktu, kā parasti, veidojot lapu un nosakot bāzes līniju par to, kā izskatīsies vietne. Pieņemsim, ka vēlaties, lai lapas fonta izmērs būtu 16 pikseļi, jūs varētu rakstīt šo CSS:
iestāde {font-size: 16px; }
- Tagad jūs, iespējams, vēlaties palielināt šo fontu lielumu lielākiem ekrāniem, kuriem ir pietiekami daudz nekustamo īpašumu. Tieši šajā vietā tiek uzsākti mediju vaicājumi. Jūs sāktu mediju vaicājumu šādi:
@media screen and (min-width: 1000px) {}
- Šis ir multivides vaicājuma sintakse. Tas sākas ar @media, lai izveidotu Media Query pati. Tālāk jūs iestatāt "media type", kas šajā gadījumā ir "ekrāns". Tas attiecas uz galddatoru ekrāniem, planšetdatoriem, tālruņiem utt. Visbeidzot, jūs pārtraucat multivides vaicājumu, izmantojot "multivides funkciju". Mūsu iepriekš minētajā piemērā tas ir "vidējais platums: 1000 pikseļi". Tas nozīmē, ka mediju vaicājums tiks rādīts displejiem, kuru platums ir vismaz 1000 pikseļi.
- Pēc šiem Media Query elementiem jūs pievienojat atvēršanas un aizvēršanas cirtainu lencēm, kas ir līdzīgas tam, ko jūs darītu, veicot jebkuru parasto CSS kārtulu.
- Pēdējais solis uz Media Query ir pievienot CSS noteikumus, kurus vēlaties pieteikties, tiklīdz šis nosacījums ir izpildīts. Jūs pievienojat šos CSS noteikumus starp cilnēm, kas veido Media vaicājumu, piemēram, šo:
@media screen and (min-width: 1000px) {body {font-size: 20px; }
- Ja ir izpildīti Media vaicājuma nosacījumi (pārlūkprogrammas logs ir vismaz 1000 pikseļu platums), šis CSS stils stāsies spēkā, mainot mūsu vietnes fontu lielumu no 16 pikseļiem, ko sākotnēji izveidojām līdz mūsu jaunai 20 pikseļu vērtībai.
Pievienojot vairāk stili
Šajā multivides vaicājumā varat ievietot tik daudz CSS noteikumu, cik nepieciešams, lai pielāgotu savas vietnes vizuālo izskatu. Piemēram, ja jūs vēlaties ne tikai palielināt fonta izmēru līdz 20 pikseļiem, bet arī mainīt visu punktu skaļumu melnā krāsā (# 000000), varat pievienot šo:
@media screen and (min-width: 1000px) {body {font-size: 20px; } p (krāsa: # 000000; }}
Vairāk multivides vaicājumu pievienošana
Turklāt jūs varat pievienot vairāk multivides vaicājumu visiem lielākiem izmēriem, pievienojot tos savai stilu lapai, piemēram:
@media screen and (min-width: 1000px) {body {font-size: 20px; } p (krāsa: # 000000; {} @media screen un (min-width: 1400px) {body {font-size: 24px; }}
Pirmie mediju vaicājumi varētu sasniegt 1000 pikseļu platumu, mainot fonta lielumu līdz 20 pikseļiem. Pēc tam, kad pārlūkprogramma bija virs 1400 pikseļiem, fonta lielums atkal mainītos līdz 24 pikseļiem. Varat pievienot tik daudz mediju vaicājumus, kādi nepieciešami jūsu konkrētajai vietnei.
Minimālais platums un maksimālais platums
Kopumā ir divi veidi, kā rakstīt mediju vaicājumus - izmantojot "min-width" vai ar "max-width". Līdz šim mēs esam redzējuši "min-width" darbībā. Tas liek mediju vaicājumiem stāties spēkā pēc tam, kad pārlūkprogramma ir sasniegusi vismaz tādu minimālo platumu. Tātad vaicājums, kas izmanto "min-width: 1000px", tiks piemērots, ja pārlūkprogramma ir vismaz 1000 pikseļu platuma. Šis multivides vaicājuma stils tiek izmantots, kad jūs veidojat vietni "pirmā mobilā veidā".
Ja izmantojat "max-width", tas darbojas pretējā veidā. Vaicājuma "max-width: 1000px" multivides pieprasījums tiks piemērots, kad pārlūkprogramma ir nokritusies zem šī izmēra.
Attiecībā uz vecākiem pārlūkiem
Viens izaicinājums ar mediju vaicājumiem ir to atbalsta trūkums vecākajās Internet Explorer versijās. Par laimi, ir pieejamas polifiles, kas šajās vecākajās pārlūkprogrammās var palīdzēt atbalstīt mediju vaicājumus, ļaujot tos šodien izmantot vietnēs, vienlaikus nodrošinot, ka šīs vietnes ekrāns neatšķiras vecāka pārlūkprogrammas programmatūrā.
Rediģējis Jeremijs Girards 1. un 4./17
7
