Kā jūs rakstāt CSS multivides vaicājumu?

@media ekrāns un (min-width: 1000px) {}

Šī ir multivides vaicājuma sintakse. Tas sākas ar @media izveidot pašu Media Query. Pēc tam iestatiet multivides veidu, kas šajā gadījumā ir ekrāns. Šis tips attiecas uz galddatoru ekrāniem, planšetdatoriem, tālruņiem utt. Pabeidziet multivides vaicājumu ar multivides funkcija. Mūsu piemērā iepriekš tas ir vidēja platuma: 1000 pikseļi. Tas nozīmē, ka multivides vaicājums sākas displejiem, kuru platums ir vismaz 1000 pikseļi.

Pēc šiem multivides vaicājuma elementiem pievienojiet atvēršanas un aizvēršanas cirtaino stiprinājumu, kas līdzīgs tam, ko jūs darītu jebkurā normālā CSS kārtulā.

Pēdējais solis multivides vaicājumam ir CSS noteikumu pievienošana, kas piemērojami pēc šī nosacījuma izpildes. Ievietojiet šos CSS noteikumus starp cirtainajām iekavām, kas veido multivides vaicājumu, šādi:

 @media ekrāns un (min-width: 1000px) {body {font-size: 20px; }





instagram viewer

Kad tiek izpildīti multivides vaicājuma nosacījumi (pārlūkprogrammas loga platums ir vismaz 1000 pikseļu), šis CSS stils stājas spēkā, mainot mūsu vietnes fonta lielumu no sākotnēji izveidotajiem 16 pikseļiem uz jauno vērtību 20 pikseļi. 
 Citu stilu pievienošana 

Vieta tik daudz CSS noteikumi šajā multivides vaicājumā pēc nepieciešamības pielāgot savas vietnes vizuālo izskatu. Piemēram, lai ne tikai palielinātu fonta lielumu līdz 20 pikseļiem, bet arī mainītu visu punktu krāsu uz melnu (# 000000), pievienojiet šo: 
@media ekrāns un (min-width: 1000px) {
ķermenis {
fonta lielums: 20 pikseļi;
}
p {
krāsa: # 000000;
}
}
 Citu multivides vaicājumu pievienošana 

Turklāt katram lielākam izmēram varat pievienot vairāk multivides vaicājumu, ievietojot tos stilu lapā šādi: 
@media ekrāns un (min-width: 1000px) {
ķermenis {
fonta lielums: 20 pikseļi;
}
p {
krāsa: # 000000;
{
}
@media ekrāns un (min-width: 1400px) {
ķermenis {
fonta lielums: 24 pikseļi;
}
}

Pirmie multivides vaicājumi sākas ar 1000 pikseļu platumu, mainot fonta lielumu uz 20 pikseļiem. Pēc tam, kad pārlūkprogramma bija virs 1400 pikseļiem, fonta lielums atkal mainīsies uz 24 pikseļiem. Pievienojiet tik daudz multivides vaicājumu, cik nepieciešams jūsu konkrētajai vietnei. 
 Min-Width un Max-Width 

Parasti ir divi veidi, kā rakstīt multivides vaicājumus, izmantojot min platums vai ar max platums. Līdz šim mēs redzējām darbībā min-platumu. Šī pieeja aktivizē multivides vaicājumus pēc tam, kad pārlūkprogramma sasniedz vismaz šo minimālo platumu. Tātad vaicājums, kas izmanto min platums: 1000 pikseļi attiecas, ja pārlūkprogrammas platums ir vismaz 1000 pikseļi. Šis multivides vaicājuma stils tiek izmantots, ja vietni veidojat vispirms mobilajām ierīcēm. 

Ja jūs izmantojat max platums, tas darbojas pretēji. Pēc pārlūkprogrammas nokrišanas zem šī lieluma tiek izmantots multivides vaicājums “max-width: 1000px”. 

Citējiet šo rakstu.