Kuidas kirjutada CSS-i meediapäringut?

@meediaekraan ja (min-laius: 1000px) {}

See on meediapäringu süntaks. See algab @media ise meediapäringu loomiseks. Järgmisena määrake meediumitüüp, mis antud juhul on ekraan. See tüüp kehtib lauaarvutite ekraanide, tahvelarvutite, telefonide jms kohta. Meediumipäring lõpetage nupuga meediumifunktsioon. Meie ülaltoodud näites see on keskmise laiusega: 1000 pikslit. See tähendab, et meediumipäring käivitab ekraanid, mille laius on vähemalt 1000 pikslit.

Pärast neid meediapäringu elemente lisage avanev ja sulgev lokkisulg, mis sarnaneb tavaliste CSS-reeglite korral.

Meediumipäringu viimane samm on lisada CSS-reeglid, mida pärast selle tingimuse täitmist rakendada. Sisestage need CSS-reeglid meediapäringu moodustavate lokkide vahele:

 @meediaekraan ja (min-width: 1000px) {body {font-size: 20px; }

Kui meediumipäringu tingimused on täidetud (brauseriakna laius on vähemalt 1000 pikslit), siis see CSS-stiil jõustub, muutes meie saidi fondi suuruse algselt loodud 16 pikslilt uuele väärtusele 20 pikslit. 





instagram viewer
 Stiilide lisamine 

Asetage nii palju CSS-i reeglid selles meediumipäringus vastavalt teie veebisaidi visuaalse välimuse kohandamiseks. Näiteks, et mitte ainult suurendada fondi suurust 20 pikslini, vaid ka muuta kõigi lõikude värv mustaks (# 000000), lisage see: 
@meediaekraan ja (min-laius: 1000px) {
keha {
fondi suurus: 20px;
}
p {
värv: # 000000;
}
}
 Veel meediumipäringute lisamine 

Lisaks saate iga suurema suuruse jaoks lisada rohkem meediumipäringuid, lisades need oma stiililehele järgmiselt: 
@meediaekraan ja (min-laius: 1000px) {
keha {
fondi suurus: 20px;
}
p {
värv: # 000000;
{
}
@meediaekraan ja (min-laius: 1400px) {
keha {
fondi suurus: 24 pikslit;
}
}

Esimesed meediumipäringud algasid 1000 piksli laiusega, muutes fondi suuruseks 20 pikslit. Kui brauser oli suurem kui 1400 pikslit, muutus fondi suurus uuesti 24 piksliks. Lisage nii palju meediumipäringuid kui vaja teie konkreetse veebisaidi jaoks. 
 Min-Width ja Max-Width 

Meediumipäringute kirjutamiseks on tavaliselt kaks võimalust - kasutades min-laius või koos max laius. Siiani oleme näinud min-laiust tegevuses. See lähenemine aktiveerib meediumipäringud pärast seda, kui brauser saavutab vähemalt selle minimaalse laiuse. Nii et päring, mis kasutab min-laius: 1000px kehtib, kui brauseri laius on vähemalt 1000 pikslit. Seda meediumipäringu stiili kasutatakse saidi loomisel kõigepealt mobiilis. 

Kui kasutate max laius, see töötab vastupidisel viisil. Pärast brauseri langemist alla selle suuruse rakendatakse meediumipäringut "max-width: 1000px". 

Tsiteeri seda artiklit.