Süntaks nii min-laiuse kui ka maksimaalse laiusega meediumipäringute jaoks
Vastutustundlik veebidisain on veebisaitide loomise lähenemisviis, kus need lehed võivad dünaamiliselt muuta oma kujundust ja välimust külastaja ekraani suuruse järgi . Suured ekraanid saavad suurema kuvariga sobiva kujunduse, samal ajal kui väiksemad seadmed (nt mobiiltelefonid) saavad sama veebisaiti kujundatud viisil, mis sobib selle väiksema ekraaniga. See lähenemine annab parema kasutuskogemuse kõigile kasutajatele ja võib isegi aidata otsingumootori paremusjärjestust parandada . Oluline osa reageerivast veebidisainist on CSS-i meediumipäringud.
Meediumipäringud on nagu teie veebisaidi CSS-failis väikesed tingimuslikud avaldused, mis võimaldavad teil määrata teatud CSS-i reeglid, mis mõjutavad ainult siis, kui on täidetud teatud tingimus, näiteks kui ekraani suurus on teatud künnistest kõrgemal või väiksem.
Meediumipäringud tegevuses
Kuidas saate veebisaidil kasutada meediumipäringuid? Siin on väga lihtne näide:
- Alustaksid hästi struktureeritud HTML-dokumendist, mis ei sisalda visuaalseid stiile (see on ka CSS-i jaoks)
- Teie CSS-failis käivitatakse nii, nagu tavaliselt, lehekülje kujundamisel ja selle põhjal, kuidas veebisait välja näeb. Ütle, et soovite, et lehe kirjasuurus oleks 16 pikslit, võite kirjutada selle CSS: body {font-size: 16px; }
- Nüüd võite soovi suurendada selle kirjasuuruse suurematele ekraanidele, millel on piisavalt kinnisvara. See on koht, kus meediumipäringud sisenevad. Sellega alustad Media Queryit: @media ekraan ja (min-width: 1000px) {}
- See on meediumipäringu süntaks. See algab @mediaga, et luua Media-päring ise. Järgmisena seadisite "meediumitüübi", mis antud juhul on "ekraan". See kehtib lauaarvutite ekraanide, tahvelarvutite, telefonide jne kohta. Lõpuks lõpetate meediumipäringu koos meediumifunktsiooniga. Eespool toodud näites on see keskmine laius: 1000 pikslit. See tähendab, et meediumipäring lüüakse ekraanide jaoks, mille laius on vähemalt 1000 pikslit.
- Pärast neid meediumipäringu elemente lisate avamis- ja sulgemisjooned, mis sarnanevad tavapärase CSS-reegliga.
- Meediumipäringu viimane samm on CSS-i reeglite lisamine, mida soovite rakendada, kui see tingimus on täidetud. Selle CSS-i reeglid lisatakse meediumipäringu moodustavate lokkide vahele, nagu see on: @media-ekraan ja (min-laius: 1000px) {body {font-size: 20px; }
- Kui meediumipäringu tingimused on täidetud (brauseri aken on vähemalt 1000 pikslit lai), jõustub see CSS-stiil, muutes meie saidi kirjasuurust algselt 16-st pikslilt, mille meie uus väärtus on 20 pikslit.
Veel stiilide lisamine
Selle saidi meediarakenduses võite paigutada nii palju CSS-i reegleid, kui soovite veebisaidi visuaalset välimust kohandada. Näiteks kui soovite mitte ainult suurendada fondi suurust 20 pikslini, vaid muuta ka kõikide mustade värvide värvi (# 000000), võite selle lisada:
@media-ekraan ja (min-laius: 1000px) {body {font-size: 20px; } p {värv: # 000000; }}Veel meediumipäringute lisamine
Lisaks võite lisada iga suurema suurusega meediumipäringuid, lisades need oma laadilehele järgmiselt:
@media-ekraan ja (min-laius: 1000px) {body {font-size: 20px; } p {värv: # 000000; {} @media ekraan ja (min-laius: 1400px) {body {font-size: 24px; }}Esimesed meediumipäringud löövad vahemikus 1000 pikslit, muutes kirjasuurus 20 pikslit. Kui brauser ületas 1400 pikslit, muutuks kirjasuurus uuesti 24 pikslini. Võite lisada nii palju meediumipäringuid, kui see on teie konkreetse veebisaidi jaoks vajalik.
Min-laius ja maksimaalne laius
Meediumipäringute kirjutamiseks on üldiselt kaks võimalust - kasutades "min-laiust" või "max-laiusega". Seni oleme näinud "min-laiust" tegevuses. See põhjustab meediumipäringute jõustumise, kui brauser on saavutanud vähemalt selle minimaalse laiuse. Nii et päring, mis kasutab "min-width: 1000px", kehtib siis, kui brauser on laiusega vähemalt 1000 pikslit. See meediumipäringu stiil on kasutusel siis, kui teete saidi mobiil-esmakordsel viisil.
Kui kasutate "max-width", töötab see vastupidisel viisil. "Max-width: 1000px" meediumipäringut rakendatakse, kui brauser on selle suurusega alla langenud.
Vanemate brauseritega
Üks meediumipäringute väljakutse on nende Internet Exploreris vanemate versioonide toetuseta jätmine. Õnneks on olemas mitut tüüpi failid, mis võivad nende vanemate brauseritega meediumipäringuid toetada, võimaldades neil neid veebisaitidel täna kasutada, tagades samal ajal, et selle saidi kuvamine vanemat brauseritarkvara ei pruugi puruneda.
Redigeeris Jeremy Girard 1. jaan/17/17