Tässä viestissä mainitaan mediakyselyjen toteuttamiseen tarvittavat ohjeet.
Kuinka ottaa mediakyselyt käyttöön mobiililaitteille?
Mediakyselyä voidaan soveltaa mobiililaitteisiin mainitsemalla ' @media ” -tunniste ja määrittämällä näytön koon pienissä aaltosulkeissa. Tämän mediakyselyn CSS voidaan sitten lisätä kiharaisiin aaltosulkeisiin. Aina kun näytön koko vastaa käyttäjän määrittämää kokoa, se käyttää ilmoitettua mediakyselyä.
Katsotaanpa käytännön esimerkkiä, jolla opit mobiililaitteiden mediakyselyiden toteuttamisen.
Esimerkki: Luo asettelu, joka muuttuu kahden sarakkeen asettelusta yhden sarakkeen asetteluksi käyttämällä mediakyselyitä
Alla olevassa esimerkissä verkkosivun asettelu muuttuu sarakeasettelusta yhden sarakkeen asetteluksi:
Vaihe 1: Luo HTML-rakenne
- Luo ensin HTML-tiedosto ja linkitä siihen ulkoinen CSS-tyylitaulukkotiedosto
osio. - Luo sitten a
-osio ja lisää sivuston otsikko käyttämällä tag. - Luo luokan nimellä 'container-class' ja kahdella muulla:lla on luokan nimi ' sarakkeessa ”. < kehon >
< h1 > Linux-vinkki < / h1 >
< / otsikko>
< div luokkaa = 'konttiluokka' >
< div luokkaa = 'pylväs' >
< h2 > Osa yksi < / h2 >
< s > Linux Hint on yksi parhaista e-oppimisalustoista. < / s >
< / div >
< div luokkaa = 'pylväs' >
< h2 > Osa kaksi < / h2 >
< s > Linux Hint on yksi parhaista e-oppimisalustoista. < / s >
< / div >
< / div >
< / kehon >Vaihe 2: Ota CSS käyttöön
Rungon kohdalla:- Määritä ensin tekstiosa kirjoittamalla ' kehon ”-tagia ja mainitsemalla kiharat henkselit.
- Määritä aaltosulkeiden sisällä kirjasinperhe, taustaväri, marginaali ja täyte.
Käytössä
jakso:
- Määritä tekstin väri, tekstin tasaus, taustaväri ja täyte.
Käytössä 'konttiluokka' div:
- Aseta ' näyttö ' omaisuuden arvo ' flex ” luodaksesi Flexboxin.
- Käytä ' perustele-sisältö ' lisätäksesi tilaa sisällön väliin ja lisätäksesi täyttöä.
Sarakkeessa:
- Määritä ensin ilmoitettu arvo ' flex ”-ominaisuutta lisätäksesi välilyönnin kahden asetteluosan väliin.
- Lisää sen jälkeen taustaväri, reunus, täyte ja laatikon koko.
Vaihe 3: Käytä Mediakyselyä
- Jos haluat käyttää mediakyselyä mobiililaitteissa, lisää ensin ' @media ' -tunniste.
- Määritä sitten arvo ' 768 pikseliä ', mikä on tyypillistä mobiililaitteille ' max-leveys ” omaisuutta pienten henkselien sisällä.
- Määritä sen jälkeen ' sarakkeessa ' arvo ' flex-suunta ' omaisuutta, joka koskee ' konttiluokka” luokka. Tämä muuttaa kaksi saraketta yhdeksi sarakkeeksi aina, kun määritetty näytön koko havaitaan.
- Käytä lopuksi CSS:ää ' sarakkeessa ' luokka ja määritä ' marginaali ' ja ' flex ” arvot:
font-family: sans-serif;
tausta- väri : hopea;
marginaali: 0 ;
pehmuste: 0 ;
}
otsikko {
tausta- väri : #2f4f4f;
täyte: 20px;
teksti- kohdistaa : keskus;
väri : valkoinen;
}
.container- luokkaa {
näyttö: flex;
perustella- sisältö : välilyönti;
täyte: 20px;
}
.sarake {
flex: 0 1 lask ( viisikymmentä % - 10 kuvapistettä ) ;
rajaa : 1px kiinteä vihreä;
tausta- väri : valkoinen;
laatikon koko: border-box;
täyte: 20px;
}
@ media ( max- leveys : 768 pikseliä ) {
.container- luokkaa {
flex-suunta: pylväs;
}
.sarake {
flex: 0 1 100 %;
marginaali-ala: 20px;
}
}Lähtö
Tässä on verkkosivun tulos mediakyselyn jälkeen. Tämä tulos on kaksisarakkeinen responsiivinen asettelu:
Aina kun näyttö täyttää määritetyt mitat mobiililaitteille tarkoitetun mediakyselyn avulla, se muuttuu yhden sarakkeen asetteluksi:
Johtopäätös
Ota mediakyselyt käyttöön mobiililaitteille sisällyttämällä ensin ' näkymä ' kohdassa ' pää ”-osio. Kirjoita sitten mobiilisuunnittelukohtainen CSS. Lisää sen jälkeen mediakysely käyttämällä @media-tunnistetta ja määrittämällä mobiilinäytön koko. Määritä esimerkiksi tableteille 768px ja matkapuhelimille 480px. Tässä artikkelissa on selitetty menetelmä mediakyselyjen toteuttamiseksi mobiililaitteissa.