Tässä artikkelissa esitellään vaiheet responsiivisen verkkosivustosuunnittelun luomiseksi HTML- ja CSS-kielellä käyttämällä:
Kuinka luoda responsiivinen sivustosuunnittelu HTML:n ja CSS:n avulla?
Responsiivisen verkkosivuston suunnittelun luominen HTML:n ja CSS:n avulla edellyttää asettelun rakentamista, joka mukautuu eri näyttökokoihin ja resoluutioihin. Seuraavien vaiheiden avulla voit luoda responsiivisen verkkosivuston suunnittelun:
Vaihe 1: Näkymän sisällönkuvauskenttä
' näkymä ”sisällönkuvauskentällä on tärkeä rooli responsiivisen web-suunnittelun luomisessa. Se on lisätty '
< meta nimi = 'näkymä' sisältö = 'width=device-width,initial-scale=1' / >
Yllä olevalla sisällönkuvauskentällä on kaksi attribuuttia:
- ' nimi ”-attribuutti kertoo sen toiminnon nimen, jota varten tämä tunniste on luotu/käytetty. Esimerkiksi asettamalla ' näkymä ' kohtaan ' nimi ”-attribuutti käsittelemään eri laitteiden näkymää.
- ' sisältö ” attribuutti määrittää edellisen attribuutin arvon. Se asettaa jokaisen laitteen leveyden ja skaalaa asiakirjan/verkkosivun 100 %:iin.
Vaihe 2: Responsiiviset kuvat
Koska kuvakoot vaihtelevat toisistaan, on vaikea asettaa samaa ' korkeus ' tai ' leveys ”ominaisuus jokaiselle kuvalle. Kun kuvan koko on kiinteä, käyttäjät eivät muuta verkkosivun kuvan kokoa näytön kanssa. Käyttäjät voivat kuitenkin asettaa reagoivan kuvan seuraavan koodin avulla:
img {
max- leveys : 100 %;
}
' max-leveys ” CSS-ominaisuus rajoittaa kuvaa näkymästä sille varatussa tilassa. Asettamalla arvon '%', kuvan koko muuttuu yhdessä sen yläelementin koon kanssa. Tämä luo kuvaan reagoivan tehosteen.
Vaihe 3: Flexbox-asettelu
Flexbox-asettelu on erittäin suositeltavaa responsiivisen verkkosivuston suunnitteluun. Sen avulla HTML-elementit voivat näkyä tietyssä paikassa ja muuttaa kunkin lapsen käytettävissä olevan tilan kokoa ylätason div:n käytettävissä olevan koon mukaan. Flexbox-asettelu sisältää useita ominaisuuksia, jotka tarjoavat paljon vapautta kehittäjälle, kuten alla olevassa koodissa:
< tyyli >
.vanhempi {
näyttö: flex;
}
.lapsi {
flex: 1 ;
teksti- kohdistaa : keskus;
}
< / tyyli >
< kehon >
< div luokkaa = 'vanhempi' >
< div luokkaa = 'lapsi' tyyli = 'reuna: 3px kiinteä sininen violetti;' >Tervetuloa< / div >
< div luokkaa = 'lapsi' tyyli = 'reuna: 3px kiinteä tummanvihreä;' >to< / div >
< div luokkaa = 'lapsi' tyyli = 'reuna: 3px tasainen punainen;' >Linuxint< / div >
< / div >
< / kehon >
Yllä olevassa koodinpätkässä:
- Luo ensin ylätason div-elementti, jonka tunnus on ' vanhempi ' sisällä ' ' -tunniste.
- Luo seuraavaksi useita lapsidiv-elementtejä ja määritä niille luokka ' lapsi ”.
- Valitse sitten ' vanhempi luokka ja anna arvo flex 'CSS:lle' näyttö ” omaisuutta.
- Anna sen jälkeen arvo ' 1 ' kohtaan ' flex 'omaisuutta jokaiselle' lapsi ”-luokka, joka saa lapsielementin näkyviin jousteena.
Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tulos näyttää, että lapsielementin leveys on yhtä suuri, kun selaimen kokoa muutetaan.
Vaihe 4: Ruudukkoasettelu
Ruudukkoasettelu luo ruudukon ja määrittää HTML-elementit ruudukkoosan sisällä. Ruudukkoelementit muuttuvat verkkosivun näytön koon mukaan. Se luo responsiivisen suunnittelun, kun HTML-elementin koko muuttuu laitteen näytön mukaan:
< tyyli >.container {
näyttö: ruudukko;
grid-template-columns: 1fr 1fr 1fr;
}
< / tyyli >
< kehon >
< div luokkaa = 'komponentti' >
< div tyyli = 'reuna: 3px kiinteä metsänvihreä;' >Linuxint< / div >
< div tyyli = 'reuna: 3px kiinteä tummanvihreä;' >Linuxint< / div >
< div tyyli = 'reuna: 3px tasainen punainen;' >Linuxint< / div >
< / div >
< / kehon >
Yllä olevassa koodissa:
- Luo ensin ylätason div ja määritä sille luokka ' komponentti ' sisällä ' ' -tunniste. Luo sen jälkeen siihen kolme lapsidiv-elementtiä.
- Määritä sitten CSS-tiedostoon ' ruudukko ' arvo ' näyttö 'kiinteistö' kontti ” div.
- Luo sen jälkeen verkkosivulle kolme samankokoista osaa käyttämällä ' ruudukko-malli-sarake '-ominaisuutta ja aseta se yhtä suureksi kuin ' 1fr 1fr 1fr 'jossa fr tarkoittaa' murto-osa ”.
Yllä olevan koodin kääntämisen jälkeen tulos näyttää tältä:
Tulos näyttää, että divit muuttavat itseään näytön koon mukaan yhtä suurissa suhteissa.
Vaihe 5: Mediakyselyt
Mediakyselyiden käyttö responsiivisen suunnittelun tekemiseen on eräänlainen vanhan koulun juttu, mutta silti useimmat verkkosivustot käyttävät mediakyselyitä. Mediakyselyt voidaan lisätä suoraan CSS-tiedostoon, kun olet lisännyt valitun HTML-elementin oletustyylin. Mediakysely tekee koodista hieman pidemmän ja sotkuisen. Koska kehittäjän on lisättävä koodi jokaiselle näytön koolle erikseen.
Katso esimerkiksi alla oleva koodinpätkä:
@ media näyttö ja ( min- leveys : 640 pikseliä ) {.komponentti {
tausta- väri : metsänvihreä;
}
}
Yllä olevassa koodinpätkässä:
- Aseta ensin mediakysely, joka käyttää CSS-ominaisuuksia valittuun elementtiluokkaan ' komponentti ' kun näytön koon leveys on suurempi kuin ' 640 pikseliä ”.
- Valitse seuraavaksi 'komponenttiluokka ja aseta arvo' metsänvihreä ' varten ' taustaväri ” omaisuutta.
.komponentti {
tausta- väri : dodgerblue;
}
}
Sitten yllä oleva koodinpätkä:
- Aseta mediakysely käyttämään tyylejä, kun leveyskoko on pienempi kuin ' 1000 pikseliä ”.
- Valitse nyt ' komponentti 'luokka ja anna arvo ' dodgerblue ' varten ' taustaväri ”omaisuus:
Yllä olevien koodinpätkien suorittamisen jälkeen tulos näyttää tältä:
Tulos näyttää, että mediakysely muuttaa taustaa näytön koon mukaan. Fonttikokoa, leveyttä, korkeutta ja muita CSS-ominaisuuksia voidaan myös käyttää noudattamalla samaa mallia.
Mahdolliset keskeytyspisteiden näytön koot, jotka on otettava huomioon mediakyselyitä käytettäessä, ovat:
- ' pieni ' näytön koko, aseta leveys pienemmäksi kuin ' 640 pikseliä ”.
- ' keskikokoinen ' näkymän näytön koko, leveys vaihtelee välillä ' 641 pikseliä ' ja ' 1007 pikseliä ”.
- ' suuri ' näytön koko, aseta leveydeksi ' 1008 pikseliä ' tai suurempi.
Johtopäätös
Responsiivisen verkkosivuston suunnittelun luomiseksi kehittäjien on lisättävä ' näkymä ' -tunniste '