Mediakyselyjen käyttäminen HTML- ja CSS-tiedostoissa reagoivien verkkosivustojen luomiseen

Jos haluat kehittää verkkosivustoja / verkkosovelluksia, sinun on tiedettävä, kuinka luoda reagoivia malleja menestyksesi kannalta.

Aikaisemmin verkkosivustojen luominen, jotka sopeutuivat hyvin erilaisiin näytön kooihin, oli ylellisyyttä, jota verkkosivustojen omistajien oli pyydettävä kehittäjältä. Älypuhelinten ja tablettien käytön lisääntyminen on kuitenkin tehnyt reagoivan suunnittelun välttämättömäksi ohjelmistokehityksen maailmassa.

Mediakyselyjen käyttö on paras tapa varmistaa, että verkkosivustosi / verkkosovelluksesi näkyy juuri sellaisena kuin haluat sen kaikilla laitteilla.

Reagoivan suunnittelun ymmärtäminen

Lyhyesti sanottuna reagoiva suunnittelu käsittelee HTML / CSS: n käyttöä verkkosivustojen / verkkosovellusten ulkoasun luomiseen, joka mukautuu erilaisiin näyttökokoihin. HTML / CSS: ssä on muutama erilainen tapa saavuttaa reagointikyky verkkosivuston suunnittelussa:

• Rem- ja em-yksiköiden käyttäminen pikselien sijaan (px)
• Kunkin verkkosivun näkymän / mittakaavan asettaminen
• Mediakyselyjen käyttäminen

Mediakysely on CSS: n ominaisuus, joka julkaistiin CSS3-versiossa. Tämän uuden ominaisuuden käyttöönoton myötä CSS: n käyttäjät saavat mahdollisuuden säätää verkkosivun näyttöä laitteen / näytön korkeuden, leveyden ja suunnan (vaaka- tai pystytila) perusteella.

Lue lisää: Essential CSS3 Properties -huijausarkki

Mediakyselyt tarjoavat puitteet koodin luomiseen kerran ja sen käyttämiseen useita kertoja koko ohjelmassa. Tämä ei ehkä näytä niin hyödylliseltä, jos kehität verkkosivustoa, jossa on vain kolme verkkosivua, mutta jos työskentelet yrityksessä, jolla on satoja erilaisia ​​verkkosivuja - tämä tulee olemaan massiivinen aika säästäjä.

Mediakyselyjen käytössä on otettava huomioon useita eri asioita: rakenne, sijoittelu, alue ja linkittäminen.

Vain @media / ei media-tyyppi ja (lauseke) {
/ * CSS-koodi * /
}

Mediakyselyn yleinen rakenne sisältää:

• @Media-avainsana
• Ei / ainoa avainsana
• Mediatyyppi (joka voi olla joko näyttö, tulostus tai puhe)
• Hakusana "ja"
• Ainutlaatuinen lauseke sulkeissa
• CSS-koodi suljettuna avattujen ja sulkeutuvien kiharoiden pariksi.

Liittyvät: CSS: n käyttäminen asiakirjojen alustamiseen tulostusta varten

Vain @media-näyttö ja (enimmäisleveys: 450 kuvapistettä) {
runko {
taustaväri: sininen;
}
}

Yllä oleva esimerkki soveltaa CSS-tyyliä (erityisesti sinistä taustaväriä) vain laitteiden näyttöihin, joiden leveys on 450 kuvapistettä tai vähemmän - siis pohjimmiltaan älypuhelimiin. Ainoa avainsana voidaan korvata ei-avainsanalla, ja sitten yllä olevassa mediakyselyssä oleva CSS-muotoilu koskee vain tulostusta ja puhetta.

Oletusarvoisesti yleinen mediakyselyilmoitus koskee kuitenkin kaikkia kolmea mediatyyppiä, joten mediatyyppiä ei tarvitse määrittää, ellei tavoitteena ole sulkea pois yhtä tai useampaa niistä.

/ * suunnittelu älypuhelimille * /
@media (enimmäisleveys: 450px) {
runko {
taustaväri: sininen;
}
}

Mediakysely on CSS-ominaisuus; Siksi sitä voidaan käyttää vain muotoilukielellä. CSS voidaan sisällyttää koodiin kolmella eri tavalla; kuitenkin vain kaksi näistä menetelmistä tarjoaa käytännöllisen tavan sisällyttää mediahaun ohjelmiin - sisäisen tai ulkoisen CSS: n.

Sisäinen menetelmä sisältää

Ulkoinen menetelmä sisältää mediakyselyn luomisen ulkoiseen CSS-tiedostoon ja linkittämisen HTML-tiedostoon tag.

Riippumatta siitä, käytetäänkö mediakyselyjä sisäisen tai ulkoisen CSS: n kautta, tyylityskielellä on yksi tärkeä näkökohta, joka voi vaikuttaa kielteisesti mediakyselyn toimintaan. CSS: llä on etusijajärjestys. Kun käytät a CSS-valitsin, tai tässä tapauksessa media kysely, jokainen uusi media kysely, joka lisätään CSS-tiedostoon, ohittaa (tai on etusijalla) aikaisemman.

Oletusmediakyselykoodi, joka on yllä, kohdistuu älypuhelimiin (leveys 450px ja alle), joten jos haluat asettaa a eri tausta taulutietokoneille, luulet voivasi lisätä seuraavan koodin olemassa olevaan CSS-tiedostoon.

/ * tablettien muotoilu * /
@media (enimmäisleveys: 800px) {
runko {
taustaväri: punainen;
}
}

Ainoa ongelma on, että etusijajärjestyksen takia tableteilla olisi punainen taustaväri ja älypuhelimilla olisi nyt myös punainen taustaväri, koska 450 kuvapistettä ja alle on alle 800 kuvapistettä.

Yksi tapa ratkaista tämä pieni ongelma olisi lisätä tablet-laitteiden mediahaun ennen älypuhelimiin liittyviä kyselyjä. jälkimmäinen korvaisi edellisen ja sinulla olisi nyt älypuhelimet, joissa on sininen taustaväri ja tabletit, joissa on punainen taustaväri.

On kuitenkin parempi tapa saavuttaa erillinen muotoilu älypuhelimille ja tableteille huolimatta etusijajärjestyksestä. Tämä on mediakyselyjen ominaisuus, joka tunnetaan nimellä aluemäärittely, jossa kehittäjä voi luoda media kyselyn, jonka leveys on suurin ja pienin (alue).

/ * tablettien muotoilu * /
@media (max-width: 800px) ja (min-width: 451) {
runko {
taustaväri: punainen;
}
}

Yllä olevan esimerkin avulla mediakyselyjen sijoittelu tyylitaulukkoon on merkityksetöntä, koska tablettien ja älypuhelinten suunnittelu kohdistuu kahteen erilliseen leveyskokoonpanoon.

Jos et halua upottaa mediakyselyjä CSS-koodiin, voit käyttää vaihtoehtoista tapaa. Tämä menetelmä edellyttää mediakyselyjen käyttöä HTML-tiedoston tunniste, joten sen sijaan, että sinulla olisi yksi massiivinen tyylitaulukko, joka sisältää mallin tyyliasetukset älypuhelimet, tabletit ja tietokoneet - voit käyttää kolmea erillistä CSS-tiedostoa ja luoda mediatiedostosi tag.

tag on HTML-elementti, jota käytetään CSS-tyylin tuomiseen ulkoisesta tyylitaulukosta. Tällä tagilla on mediaominaisuus, joka toimii samalla tavalla kuin mediakysely CSS: ssä.

 päätyylitaulukko 

 tablet-tyylitaulukko 
href = "tablet.css">
 älypuhelimen tyylitaulukko 

Yllä oleva koodi tulisi sijoittaa

HTML-tiedostosi tunniste. Nyt sinun tarvitsee vain luoda kolme erillistä CSS-tiedostoa tiedostojen nimillä main.css, tablet.css ja smartphone.css - luoda sitten haluamasi malli jokaiselle laitteelle.

Päätiedoston tyyli koskee kaikkia näyttöjä, joiden leveys on yli 800 kuvapistettä, tablettitiedoston tyyliä sovelletaan kaikkiin näyttöihin, joiden leveys on 450–801 kuvapistettä, ja älypuhelintiedoston tyyli koskee kaikkia alla olevia näyttöjä 451 kuvapistettä.

Jos teit sen tämän artikkelin loppuun, voit oppia, mikä on reagoiva muotoilu ja miksi se on hyödyllinen. Voit nyt tunnistaa ja käyttää mediahakuja CSS- ja HTML-tiedostoissa. Lisäksi sinulle esiteltiin CSS: n tärkeysjärjestys ja näet, miten se voi vaikuttaa mediakyselyidesi toimintaan.

Kuvahyvitys: Negatiivinen tila /Pexels

Kuinka asettaa taustakuva CSS: ssä

CSS on tehokas työkalu verkkosivujen muotoiluun. Oppiminen taustakuvan sijoittamisesta opettaa sinulle paljon CSS-perusteita.

Lue seuraava

Kirjailijasta