Minatūras un max platuma multivides vaicājumu sintakse
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 noteiktus CSS noteikumus, kas ietekmēs tikai tad, ja būs 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 jūs vēlaties, lai lapas fonta izmērs būtu 16 pikseļi, jūs varētu rakstīt šo CSS: body {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. Šajā vietā tiek atvērti Media Queries. Jūs varētu sākt Media Query šādu: @media ekrāna un (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 "screen". 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 mediju vaicājumu, šādi: @media screen (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 varat pievienot vairāk vaicājumu par visiem lielākiem izmēriem, pievienojot tos savai stila 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 vecāku versiju trūkums Internet Explorer. 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