Tundlik disainiõpetus - tundliku veebikujunduse saate teada 5 minutiga

Selles artiklis õpetan teile viie minuti jooksul võimalikult palju reageerivaid disainitehnikaid. See pole ilmselgelt piisav, et seda korralikult õppida, kuid see annab teile ülevaate kõige olulisematest mõistetest, mida ma isiklikult defineerin järgmiselt:

  • Suhtelised CSS-üksused
  • Meediapäringud
  • Flexbox
  • Reageeriv tüpograafia

Kui soovite pärast seda teemat sügavamale sukelduda, võite tutvuda meie tundliku veebiarendaja alglaagriga Scrimbal, mis võimaldab teil professionaalsel tasemel reageerivaid veebisaite luua.

Kuid alustame nüüd põhitõdedest!

Suhtelised CSS-üksused

Reageeriva veebidisaini keskmes on suhtelised CSS-üksused. Need on ühikud, mis saavad oma väärtuse mõnest muust välisest väärtusest. See on mugav, kuna võimaldab näiteks pildi laiusel põhineda brauseri laiusel.

Kõige tavalisemad on:

  • %
  • em
  • rem
  • vw
  • vh

Selles artiklis alustame protsendiühikust %ja seejärel vaatame remühikut viimases jaotises.

Oletame, et teil on selline väga lihtne veebisait:

Alt tekst

Selle HTML on lihtsalt järgmine:

Welcome to my website

Nagu näete allolevast GIF-ist, on meie pildil vaikimisi kindel laius:

Alt tekst

See pole eriti reageeriv, seega muutkem see hoopis 70 protsendiks. Teeme lihtsalt järgmist:

.myImg { width: 70%; } 

See määrab pildi laiuseks 70 protsenti vanema laiusest, milleks on silt. Kuna silt laieneb kogu ekraani laiusele, on pilt alati 70 protsenti ekraanist endast.

Siin on tulemus:

Alt tekst

Ja nii lihtne on reageerivat pilti luua!

Meediumipäringute kasutamine mobiilikogemuse parandamiseks

Siiski on meie reageeriva paigutusega üks probleem, see on see, et see tundub väga väikestel ekraanidel imelik. Mobiililt vaadates peab 70% laius kitsenema. Lihtsalt otsige ennast:

A

Alt tekst

A

Selle olukorra paremaks muutmine on meediumipäringute jaoks ideaalne ülesanne. Need võimaldavad teil kasutada erinevat stiili, mis põhineb näiteks ekraani laiusel. Põhimõtteliselt võime öelda, kui ekraan on laiusega alla 768 pikslit, kasutage erinevat stiili.

CSS-is meediumipäringu loomiseks toimige järgmiselt.

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

Seda CSS-plokki rakendatakse ainult siis, kui ekraani laius on väiksem kui 768 pikslit.

Siin on tulemus:

Alt tekst

Nagu näete, on lehel murdepunkt, kus pilt järsku laieneb. See on siis, kui veebilehitsejas on 768 pikslit lai ja pildi vahetamine teiste 70%ja 100%.

Flexboxi kasutamine navigeerimisribal

Järgmine on Flexbox. Reageerimisvõime kohta ei saa lihtsalt õppida ilma Flexboxi tundma õppimata. See muutis reageerivat disainimängu, kui see paar aastat tagasi kasutusele võeti, kuna see muudab elementide reageerimise piki telge tunduvalt lihtsamaks.

Flexboxi kasutamiseks muudame meie saidi natuke keerukamaks, lisades pealkirja kohale navigeerimisriba. Siin on selle HTML:

 Home About me Contact  

Vaikimisi näeb see lihtsalt välja selline.

A

Alt tekst

A

Meie navigeerimiselemendid on kõik pigistatud vasakule küljele, mida me ei soovi. Soovime, et need paikneksid kogu lehe ulatuses ühtlaselt.

Selle saavutamiseks muudame navikonteineri lihtsalt flexboxiks ja kasutame siis maagilist justify-contentomadust.

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

display: flexLülitab sisse paindlik kasti ja justify-content: space-aroundütleb brauser et asjade sees paindlik kasti peaks olema ruumi ümber. Nii jaotab brauser kogu järelejäänud ruumi võrdselt kolme elemendi vahel.

Kuidas see välja näeb? Ja nagu te märkate, on see skaala kenasti:

Alt tekst

A

Reageeriv tüpograafia: rem

Viimane samm on muuta ka meie tüpograafia tundlikuks. Näete, ma tahan, et navigeerimisriba ja pealkiri väheneksid veidi, kui ekraan on vähem kui 768 pikslit lai (meie meediumipäringu murdepunkt, mäletate?).

Üks võimalus selleks oleks kõigi meediumipäringu fondisuuruste vähendamine, näiteks:

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

See pole siiski ideaalne. Meil võib rakenduses olla mitu murdepunkti ja meil võib olla ka mitu elementi (h2, h3, paragrahvid jne). Selle tulemusena peame jälgima kõiki elemente kõigis erinevates murdepunktides. Sellest saab segadus!

Kuid suure tõenäosusega suhtlevad nad erinevates murdepunktides üksteisega enam-vähem samamoodi. Näiteks on h1testament alati suurem kui paragraph.

Mis siis oleks, kui saaksin ühte tegurit korrigeerida ja seejärel muuta ülejäänud fondisuurused selle teguri suhtes?

Sisestage remmid!

A remon põhimõtteliselt see: fondi suuruse väärtus, mille olete oma elemendile määranud . Liks seda:

html { font-size: 14px; } 

Nii et selles dokumendis remvõrdub üks 14px.

See tähendab, et saame oma veebisaidil kõik oma fondisuurused määrata ühikuna rem:

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

Ja siis muudame meediumipäringus lihtsalt sildi fondi suuruse väärtust . See tagab, et ka meie h1ja   navelementide fondi suurus muutub.

Siit saate teada, kuidas remmeediumipäringus oma väärtust muudame :

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

Ja just nii on meil ka kõigi meie fondisuuruste murdepunkt. Pange tähele, kuidas fondi suurus muutub, kui leht ületab 768-pikslise märgi:

Alt tekst

Sellest on möödunud vaid viis minutit, kuid nüüd olete tegelikult õppinud lehe laiusele vastamiseks tegema fondisuurusi, pilte ja navariba elemente. See on päris hea ja olete astunud esimesed sammud tundlike veebisaitide loomise väga väärtuslike oskuste õppimise suunas.

Kui olete huvitatud selle õppereisi jätkamisest, soovitan teil heita pilk meie massiivsele Scrimba kursusele sellel teemal! Seda õpetab üks YouTube'i populaarseimaid selle teema õpetajaid ja see viib teid tundliku veebidisaini professionaalsele tasemele.

Head kodeerimist :)

Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaagriga.