Tässä artikkelissa opetan sinulle niin monta reagoivaa suunnittelutekniikkaa kuin mahdollista viiden minuutin kuluessa. Tämä ei tietenkään riitä oppimaan sitä kunnolla, mutta se antaa sinulle yleiskuvan tärkeimmistä käsitteistä, jotka henkilökohtaisesti määritän seuraavasti:

• Suhteelliset CSS-yksiköt
• Mediakyselyt
• Flexbox
• Reagoiva typografia

Jos haluat sukeltaa syvemmälle aiheeseen jälkikäteen, voit tutustua Scrimban reagoivaan web-kehittäjien käynnistyskampaan, jonka avulla voit rakentaa reagoivia verkkosivustoja ammattitasolla.

Mutta nyt, aloitetaan perusasioista!

Suhteelliset CSS-yksiköt

Reagoivan verkkosuunnittelun ytimessä ovat suhteelliset CSS-yksiköt. Nämä ovat yksiköitä, jotka saavat arvonsa jostakin muusta ulkoisesta arvosta. Tämä on kätevää, koska se sallii esimerkiksi kuvan leveyden perustuvan selaimen leveydelle.

Yleisimmät ovat:

• %
• em
• Rem
• vw
• vh

Tässä artikkelissa aloitetaan prosenttiyksiköllä %ja sitten tarkastellaan remyksikköä viimeisessä osassa.

Oletetaan, että sinulla on hyvin yksinkertainen verkkosivusto, kuten tämä:

Sen HTML on vain seuraava:

Welcome to my website

Kuten alla olevasta GIF: stä näet, kuvallamme on oletuksena kiinteä leveys:

Se ei ole erityisen herkkä, joten vaihdetaan se 70 prosenttiin. Teemme yksinkertaisesti seuraavat toimet:

.myImg { width: 70%; } 

Tämä asettaa kuvan leveyden 70 prosentiksi sen vanhemman, joka on tunniste , leveydestä . Kun tunniste ulottuu koko näytön leveydelle, kuva on aina 70 prosenttia itse näytöstä.

Tässä on tulos:

Ja niin helppoa on luoda reagoiva kuva!

Mediakyselyjen käyttäminen mobiilikokemuksen parantamiseksi

Meillä on kuitenkin yksi ongelma reagoivassa asettelussa, nimittäin se, että se näyttää oudolta hyvin pieniltä näytöiltä. 70%: n leveyden on kavennettava katsottuna matkapuhelimella. Vain etsiä itseäsi:

A

A

Sen näyttäminen paremmalta tässä tilanteessa on täydellinen tehtävä mediakyselyihin. Niiden avulla voit käyttää eri tyyliä esimerkiksi näytön leveyden perusteella. Voimme periaatteessa sanoa, jos näyttö on alle 768 kuvapistettä leveä, käytä eri tyyliä.

Näin luomme mediakyselyn CSS: ssä:

@media (max-width: 768px) { .myImage { width: 100% } } 

Tätä CSS-lohkoa käytetään vain, jos näytön leveys on alle 768 pikseliä.

Tässä on tulos:

Kuten näette, sivulla on katkaisupiste, jossa kuva yhtäkkiä laajenee. Silloin selaimen leveys on 768 pikseliä, ja kuva vaihtuu välillä 70%ja 100%.

Flexboxin käyttäminen navigaattoriin

Seuraavaksi on Flexbox. Et yksinkertaisesti voi oppia reagoivuudesta oppimatta Flexboxista. Se muutti reagoivaa suunnittelupeliä, kun se esiteltiin muutama vuosi sitten, koska se helpottaa elementtien sijoittamista reagoivasti akselia pitkin.

Flexboxin hyödyntämiseksi teemme sivustostamme hieman monimutkaisemman lisäämällä navigaattorin otsikon yläpuolelle. Tässä HTML-koodi:

 Home About me Contact  

Oletuksena se näyttää yksinkertaisesti tältä.

A

A

Kaikki navigointikohteemme on puristettu vasemmalle puolelle, jota emme halua. Haluamme, että ne sijoitetaan tasaisesti koko sivulle.

Tämän saavuttamiseksi muutamme yksinkertaisesti nav-kontin flexboxiksi ja käytämme sitten maagista justify-contentominaisuutta.

nav { display: flex; justify-content: space-around; } 

display: flexKääntyy joustavaksi ruutuun ja justify-content: space-aroundkertoo selaimelle, että tuotteet sisällä joustavan laatikon tulisi olla tilaa ympärilleen. Joten selain jakaa kaiken jäljellä olevan tilan tasaisesti kolmen kohteen ympärille.

Näin se näyttää. Ja kuten huomaat, se skaalautuu hienosti:

A

Reagoiva typografia: rem

Viimeinen vaihe on tehdä myös typografiastamme reagoiva. Haluan, että navigointipalkki ja otsikko kutistuvat hieman, kun näyttö on alle 768 pikseliä (muistakaa mediatiedostojemme katkaisupiste?).

Yksi tapa tehdä tämä olisi vähentää kaikkia mediakyselyn fonttikokoja seuraavasti:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Tämä ei kuitenkaan ole ihanteellinen. Saatamme päätyä useisiin katkaisupisteisiin sovelluksessa, ja meillä voi olla myös useita elementtejä (h2, h3, kappaleet jne.). Tämän seurauksena meidän on seurattava kaikkia elementtejä kaikissa erilaisissa rikkoutumispisteissä. Siitä tulee sotku!

Todennäköisesti he aikovat kuitenkin olla yhteydessä toisiinsa suurin piirtein samalla tavalla eri murtumispisteissä. Esimerkiksi, h1tulee aina olla suurempi kuin paragraph.

Joten mitä jos olisi tapa, jolla voisin säätää yhtä tekijää ja sitten tehdä loput kirjasinkokoista, jotka skaalautuvat suhteessa tähän tekijään?

Anna Rems!

A remon pohjimmiltaan tämä: elementille asettamasi fontin koon arvo . Liks tämä:

html { font-size: 14px; } 

Joten tässä asiakirjassa yksi remon 14 kuvapistettä.

Tämä tarkoittaa, että voimme asettaa kaikki kirjasinkoot verkkosivustollamme remyksiköinä seuraavasti:

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

Ja sitten muutamme yksinkertaisesti mediakyselyssä olevan tagin fontin koon arvoa . Tämä varmistaa, että myös meidän h1ja   navelementtien kirjasinkoko muuttuu.

Näin muutamme remarvoa mediakyselyssä:

@media (max-width: 768px) { html { font-size: 14px } } 

Ja juuri tällä tavoin meillä on katkaisupiste myös kaikille kirjasinkokoillemme. Huomaa, kuinka kirjasinkoko muuttuu, kun sivu ylittää 768 pikselin merkin:

Se on ollut vain viisi minuuttia, mutta nyt olet oppinut tekemään kirjasinkokoja, kuvia ja siirtymispalkin kohteita vastaamaan sivun leveyttä. Se on aika hyvä, ja olet ottanut ensimmäiset askeleesi kohti erittäin arvokkaiden taitojen rakentamista reagoivien verkkosivustojen rakentamiseksi.

Jos olet kiinnostunut jatkamaan tätä oppimatkaa, suosittelen sinua tutustumaan aiheeseen liittyvään massiiviseen Scrimba-kurssillemme! Sen opettaa yksi YouTuben suosituimmista aiheen opettajista, ja se vie sinut ammattitasolle reagoivassa verkkosuunnittelussa.

Hyvää koodausta :)

Kiitos lukemisesta! Nimeni on Per Borgen, olen Scrimban perustaja - helpoin tapa oppia koodaamaan. Sinun kannattaa tutustua reagoivaan verkkosuunnittelun käynnistyskampaan, jos haluat oppia rakentamaan modernia verkkosivustoa ammattitasolla.