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

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

Jos haluat kehittää verkkosivustoja/verkkosovelluksia, responsiivisten mallien luominen on menestymisen edellytys.





Aiemmin verkkosivujen luominen, jotka mukautuivat hyvin eri kokoisiin näyttöihin, oli ylellisyyttä, jota verkkosivustojen omistajien oli pyydettävä kehittäjältä. Älypuhelimien ja tablettien käytön vauhti on kuitenkin tehnyt reagoivasta suunnittelusta välttämättömän ohjelmistokehityksen maailmassa.



Mediakyselyiden käyttäminen on paras tapa varmistaa, että verkkosivustosi/verkkosovelluksesi näyttää täsmälleen haluamallasi tavalla kaikilla laitteilla.





Responsiivisen suunnittelun ymmärtäminen

Lyhyesti sanottuna responsiivinen muotoilu käsittelee HTML/CSS: n käyttöä verkkosivusto-/verkkosovellusasettelun luomiseen, joka mukautuu eri näyttökokoon. HTML/CSS: ssä on muutamia erilaisia ​​tapoja saavuttaa reagointikyky verkkosivuston suunnittelussa:

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

Mitä ovat mediakyselyt?

Mediakysely on CSS3 -versiossa julkaistun CSS: n ominaisuus. Tämän uuden ominaisuuden käyttöönoton myötä CSS -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 Cheat Sheet

Mediakyselyt tarjoavat kehyksen koodin luomiseksi kerran ja sen käyttämiseksi useita kertoja koko ohjelman ajan. Tämä ei ehkä tunnu niin hyödylliseltä, jos kehität verkkosivustoa, jossa on vain kolme verkkosivua, mutta jos työskentelet yrityksessä, jossa on satoja erilaisia ​​verkkosivuja - tämä osoittautuu massiiviseksi ajansäästöksi.



Mediakyselyiden käyttäminen

Mediakyselyjä käytettäessä on otettava huomioon useita eri asioita: rakenne, sijoittelu, alue ja linkitys.

Mediakyselyiden rakenne

Esimerkki mediakyselyrakenteesta


@media only/not media-type and (expression){
/*CSS code*/
}

Mediakyselyn yleinen rakenne sisältää:



  • Avainsana @media
  • Ei/vain avainsana
  • Mediatyyppi (joka voi olla joko näyttö, tulostus tai puhe)
  • Avainsana ja
  • Ainutlaatuinen lauseke suluissa
  • CSS -koodi, joka on parin avointen ja suljettavien aaltosulkeiden sisällä.

Aiheeseen liittyviä: Asiakirjojen muotoilu tulostusta varten CSS: n avulla

Esimerkki mediakyselystä, jossa on ainoa avainsana


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Yllä oleva esimerkki koskee CSS -muotoilua (erityisesti sinistä taustaväriä) vain laitteiden näytöille, joiden leveys on enintään 450 pikseliä - siis pohjimmiltaan älypuhelimiin. Ainoa avainsana voidaan korvata ei -avainsanalla, ja CSS -muotoilu yllä olevassa mediakyselyssä koskisi vain tulostusta ja puhetta.

Yleinen mediakyselyilmoitus koskee kuitenkin oletuksena kaikkia kolmea mediatyyppiä, joten mediatyyppiä ei tarvitse määrittää, ellei tarkoituksena ole sulkea pois yhtä tai useampaa niistä.

Esimerkki mediakyselystä


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Mediakyselyjen sijoittaminen

Mediakysely on CSS -ominaisuus; sitä voidaan siksi käyttää vain muotoilukielen sisällä. CSS: n voi sisällyttää koodiin kolmella eri tavalla; vain kaksi näistä menetelmistä tarjoaa kuitenkin käytännön tavan sisällyttää mediakyselyjä ohjelmiisi - sisäinen tai ulkoinen CSS.

Sisäinen menetelmä sisältää tunnisteen lisäämisen HTML -tiedoston tagiin ja mediakyselyn luomisen tunnisteen parametrien sisällä.

Ulkoinen menetelmä sisältää mediakyselyn luomisen ulkoisessa CSS -tiedostossa ja linkittämisen HTML -tiedostoosi tunnisteen kautta.

Mediakyselyiden alue

Käytetäänpä mediakyselyitä sisäisen tai ulkoisen CSS: n kautta, muotoilukielellä on yksi tärkeä näkökohta, joka voi vaikuttaa haitallisesti mediakyselyn toimintaan. CSS: llä on etusijajärjestyssääntö. Kun käytät CSS -valitsinta tai tässä tapauksessa mediakyselyä, jokainen uusi mediakysely, joka lisätään CSS -tiedostoon, ohittaa (tai on etusijalla edelliseen verrattuna).

Edellä olevamme oletusarvoinen mediakyselykoodi on tarkoitettu älypuhelimille (leveys alle 450 kuvapistettä), joten jos haluat asettaa erilaisen taustan tableteille, saatat ajatella, että voit yksinkertaisesti lisätä seuraavan koodin olemassa olevaan CSS-tiedostoosi.

Tablet Media -kyselyesimerkki


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

Yksi tapa ratkaista tämä pieni ongelma olisi lisätä tablet -laitteiden mediakysely ennen älypuhelimia; jälkimmäinen ohittaisi edellisen ja sinulla olisi nyt älypuhelimet sinisellä taustavärillä ja tabletit punaisella taustavärillä.

On kuitenkin parempi tapa saavuttaa erillinen muotoilu älypuhelimille ja tableteille ilman huolta etujärjestyksestä. Tämä on ominaisuus mediakyselyissä, jotka tunnetaan nimellä range Specification, jossa kehittäjä voi luoda mediakyselyn, jonka leveys on suurin ja pienin (alue).

Tablet Media Query With Range Esimerkki


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Yllä olevassa esimerkissä mediakyselyjen sijoittaminen tyylitaulukkoon tulee epäolennaiseksi, koska tablet -laitteiden ja älypuhelimien suunnittelu on suunnattu kahteen eri leveyskokoelmaan.

Jos et halua upottaa mediakyselyitä CSS -koodiin, voit käyttää vaihtoehtoista menetelmää. Tämä menetelmä sisältää mediakyselyjen käytön HTML -tiedoston tagissa, joten sen sijaan, että sinulla olisi yksi massiivinen tyylitaulukko, joka sisältää älypuhelimien, tablettien ja tietokoneiden tyyliasetukset, voit käyttää kolmea erillistä CSS -tiedostoa ja luoda mediakyselyjä tunnisteeseen.

Tunniste on HTML -elementti, jota käytetään tuomaan CSS -tyylit ulkoisesta tyylitaulukosta. Tällä tunnisteella on mediaominaisuus, joka toimii samalla tavalla kuin mediakysely CSS: ssä.




href='tablet.css'>


Yllä oleva koodi tulee sijoittaa HTML -tiedostosi tunnisteeseen. Nyt sinun tarvitsee vain luoda kolme erillistä CSS -tiedostoa, joiden tiedostonimet ovat main.css, tablet.css ja smartphone.css - ja sitten luoda erityinen malli, jonka haluat kullekin laitteelle.

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

kuinka laittaa salasana usb -muistitikulle

Nyt sinulla on työkalut reagoivien mallien luomiseen

Jos päädyit tämän artikkelin loppuun, voit oppia, mikä responsiivinen muotoilu on ja miksi se on hyödyllinen. Voit nyt tunnistaa ja käyttää mediakyselyitä CSS- ja HTML -tiedostoissa. Lisäksi sinut esiteltiin CSS: n tärkeysjärjestykseen ja huomasit, miten se voi vaikuttaa mediakyselyidesi toimintaan.

Kuvaluotto: negatiivinen tila/ Pexels

Jaa Jaa Tweet Sähköposti Taustakuvan asettaminen CSS: ään

CSS on tehokas työkalu verkkosivujen muotoiluun. Taustakuvan sijoittamisen opettelu opettaa sinulle paljon CSS -perusteita.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Verkkokehitys
  • Web-suunnittelu
  • CSS
Kirjailijasta Kadeisha Kean(21 artikkelia julkaistu)

Kadeisha Kean on täyspinoinen ohjelmistokehittäjä ja tekninen/teknologinen kirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimpia teknologisia käsitteitä; tuottaa materiaalia, jonka jokainen tekniikan aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja matkustamiseen ympäri maailmaa (dokumenttielokuvien kautta).

Lisää Kadeisha Keanilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi