Molempien leveys- ja enimmäisleveyden mediakyselyjen syntaksi
Responsive web design on lähestymistapa sellaisten verkkosivujen rakentamiseen, joissa nämä sivut voivat dynaamisesti muuttaa ulkoasun ja ulkoasun kävijän näytön kokoon perustuen . Suuret näytöt saavat näille suuremmille näytöille sopivan ulkoasun, kun taas pienemmät laitteet, kuten matkapuhelimet, voivat vastaanottaa saman verkkosivuston, joka on muotoiltu siten, että tämä pienempi näyttö on sopiva. Tämä lähestymistapa tarjoaa käyttäjille paremman käyttökokemuksen ja se voi edes parantaa hakukoneiden sijoituksia . Tärkeä osa vastaavaa web designia on CSS Media Queries.
Mediakyselyt ovat kuin pieniä ehtoja sisältäviä lausuntoja sivustosi CSS-tiedostossa, joten voit asettaa tiettyjä CSS-sääntöjä, jotka vaikuttavat vain kun tietyt ehdot täyttyvät - kuten silloin, kun näytön koko on tiettyjen kynnysarvojen ylä- tai alapuolella.
Mediakyselyt toiminnassa
Kuinka käytät mediakyselyjä verkkosivustolla? Tässä on hyvin yksinkertainen esimerkki:
- Voit aloittaa hyvin jäsennellyn HTML-asiakirjan, joka ei sisällä mitään visuaalisia tyylejä (tämä on CSS-versio)
- CSS-tiedostossa aloittaisit normaalisti muotoilemalla sivua ja asettaen perusviivan verkkosivuston näyttämiseen. Sano että halusi, että sivun fonttikoko on 16 pikseliä, voit kirjoittaa tämän CSS: body {font-size: 16px; }
- Nyt voit suurentaa fonttikokoa suurille näytöille, joilla on runsaasti kiinteistöjä. Tällöin mediakyselyt käynnistetään. Aloitat mediakyselyn seuraavasti: @media -näyttö ja (min-width: 1000px) {}
- Tämä on median kyselyn syntaksi. Se alkaa @media -ohjelmalla perustaa Media Query itse. Seuraavaksi asetat "mediatyypin", joka tässä tapauksessa on "näyttö". Tämä pätee pöytätietokoneen näyttöihin, tabletteihin, puhelimiin jne. Lopuksi lopetat Median kyselyn "Media-ominaisuudella". Yllä olevassa esimerkissämme, eli "keskileveys: 1000px". Tämä tarkoittaa, että Media Query käynnistää näytöt, joiden leveys on vähintään 1 000 pikseliä.
- Median kyselyn näiden elementtien jälkeen voit lisätä aukon ja sulkemisen kihara-palkin samanlaiseksi kuin mitä teet tavallisessa CSS-säännössä.
- Media-kyselyn viimeinen vaihe on lisätä CSS-säännöt, joita haluat käyttää, kun tämä ehto täyttyy. Voit lisätä nämä CSS-säännöt Media-kyselyn muodostavien kihara-otsakkeiden väliin seuraavasti: @media -näyttö ja (min-width: 1000px) {body {font-size: 20px; }
- Kun Media-kyselyn ehdot täyttyvät (selaimen ikkuna on vähintään 1000 pikseliä leveä), tämä CSS-tyyli tulee voimaan. Sivustojen fonttikokoa muutetaan alunperin alkuperäisestä 16 pikselistä, jonka arvo on 20 pikseliä.
Lisää muita tyylejä
Voit sijoittaa niin monta CSS-sääntöä tällä mediatiedustelulla kuin verkkosivustosi ulkoasua. Jos esimerkiksi haluat lisätä fonttikokoa 20 pikseliin, mutta myös muuttaa kaikkien kappaleiden värin mustaksi (# 000000), voit lisätä tämän:
@ media-näyttö ja (min-width: 1000px) {body {font-size: 20px; } p {väri: # 000000; }}Lisää media kyselyitä
Lisäksi voit lisätä lisää mediakyselyjä kaikkiin suurempaan kokoon lisäämällä ne tähän tyyliin:
@ media-näyttö ja (min-width: 1000px) {body {font-size: 20px; } p {väri: # 000000; {} @media -näyttö ja (min-width: 1400px) {body {font-size: 24px; }}Ensimmäiset mediakyselyt potkaisivat 1000 kuvapisteen leveäksi ja muuttuivat fonttikokoa 20 pikseliin. Sen jälkeen, kun selaimessa oli yli 1400 pikseliä, fonttikoko muuttuisi jälleen 24 pikseliin. Voit lisätä niin monta Media-kyselyä kuin tarvitaan tietylle sivustollesi.
Min-Leveys ja Max-Width
Media-kyselyjä on yleensä kaksi tapaa - käyttämällä "min-width" tai "max-width". Toistaiseksi olemme nähneet "min-width" toiminnassa. Tämä aiheuttaa sen, että mediakyselyt tulevat voimaan, kun selaimessa on saavutettu vähintään tämä vähimmäisleveys. Siksi kysely, joka käyttää "min-width: 1000px", tulee voimaan, kun selaimessa on vähintään 1000 pikseliä leveä. Media-kyselyn tyyliä käytetään, kun rakennat sivuston "mobiili-ensin" -mallilla.
Jos käytät "max-width" -arvoa, se toimii vastakkaisella tavalla. Media-kysely "max-width: 1000px" sovellettaisiin, kun selain on laskenut tämän koon alle.
Vanhemmille selaimille
Yksi haaste median kyselyissä on, että heillä ei ole tukea vanhemmissa versioissa Internet Explorerissa. Onneksi saatavilla on polyfills, jotka voivat korjata mediakyselyjä vanhemmissa selaimissa, jolloin voit käyttää niitä nykyisillä verkkosivustoilla samalla kun varmistat, että kyseisen sivuston näyttö ei näytä rikkoutuneen vanhemmassa selainohjelmistossa.
Julkaisija Jeremy Girard 1/24/17