Responsive web design basics (Suomi)

• Aseta viewport
• Koko sisällön viewport
• Käytä CSS median kyselyitä reagointikykyä
• Miten valita raja-arvot
• Näytä median kyselyn raja-arvot Chrome DevTools

mobiililaitteiden surffata web jatkuu kasvaa tähtitieteellinen tahtiin, ja nämä laitteet ovat usein rajoittaa näytön koko ja edellyttävät erilaista lähestymistapaa siihen, miten sisältö on aseteltu ruudulle.,

responsiivinen web-suunnittelu, jonka Ethan Marcotte alun perin määritteli erikseen luettelossa, vastaa käyttäjien tarpeisiin ja heidän käyttämiinsä laitteisiin. Asettelu muuttuu laitteen koon ja ominaisuuksien perusteella. Esimerkiksi puhelimen käyttäjät näkisivät yhden sarakkeen näkymässä näkyvää sisältöä; tabletti saattaa näyttää saman sisällön kahdessa sarakkeessa.

lukuisia eri näytön kokoa olemassa eri puhelimet, ”phablets,” tabletit, pöytäkoneet, pelikonsolit, Televisiot, ja jopa älyvaatteet., Näytön koot muuttuvat aina, joten on tärkeää, että sivustosi voi sopeutua mihin tahansa näytön kokoon, tänään tai tulevaisuudessa. Lisäksi laitteissa on erilaisia ominaisuuksia, joiden kanssa olemme vuorovaikutuksessa. Esimerkiksi osa kävijöistä käyttää kosketusnäyttöä. Moderni reagoiva muotoilu katsoo kaikki nämä asiat optimoida kokemus kaikille.

Aseta viewport #

Sivut optimoitu useita laitteita, on oltava meta viewport-tagi päähän asiakirjan.Meta viewport-tagi antaa selaimelle ohjeet siitä, miten hallita sivun”s mitat ja skaalaus.,

yrittää tarjota paras kokemus, mobiili selaimet renderthe sivun työpöydän näytön leveys (yleensä noin 980px, vaikka tämä variesacross laitteet), ja sitten yrittää tehdä sisältöä näyttää paremmin increasingfont koot ja skaalaus sisältöä sopimaan näytön.Tämä tarkoittaa sitä, että fontin kokoa voi näkyä epäjohdonmukaista käyttäjille,jotka voivat olla kaksoisnapauttamalla tai hyppysellinen-to-zoomin jotta nähdään ja vuorovaikutuksessa sisällön.,

Käyttämällä meta viewport-arvo width=device-width ohjaa sivun matchthe näyttö”s leveys laite-riippumaton pikseliä. Laite (tai tiheys) riippumaton pikseli on yhden pikselin edustus, joka voi tiheällä näytöllä koostua monista fyysisistä pikseleistä. Tämä mahdollistaa sivun reflowcontent vastaamaan eri näytön kokoa, onko sulatettu pieni matkapuhelin tai suuri työpöydän näytön.,

Jotkut browserskeep sivun”s leveys vakio kun pyörivät landscapemode, ja zoom pikemminkin kuin reflow täyttää näytön., Lisäämällä arvoinitial-scale=1 ohjaa selaimet, luoda 1:1 suhdetta CSSpixels ja laite-riippumaton pikseliä riippumatta laitteen suuntautumiseen, andallows sivu hyödyntää koko maiseman leveydeltä.

ei ole <meta name="viewport"> tag width tai initial-scaleMajakka tarkastuksen voi auttaa sinua automatisoida varmista, että HTML-asiakirjoja käyttämällä viewport meta tag oikein.,

Varmistaa esteetön näkymä #

lisäksi, jossa initial-scalevoit myös asettaa seuraavat määritteet viewport:

• minimum-scale
• maximum-scale
• user-scalable

Kun asetettu, nämä voivat poistaa käyttäjän”s kyky zoomata näkymä,mahdollisesti aiheuttaa esteettömyyden kysymyksiä.Siksi emme suosittele näiden ominaisuuksien käyttöä.,

Koko sisällön viewport #

molemmilla pöytäkoneiden ja mobiililaitteiden käyttäjät ovat tottuneet vieritys sivustot pystysuunnassa mutta ei vaakasuunnassa;pakottaa käyttäjä vierittää vaaka-tai zoom-outin, jotta voit nähdä koko sivu johtaa huonoja käyttäjäkokemuksia.

Kun kehitetään mobiili-sivuston meta viewport-tagi,se”s helppo vahingossa luoda sivun sisältöä, joka ei”t oikein sovi määritetyn viewport.Esimerkiksi kuva, joka näkyy leveämmällä kuin näkymä portcan aiheuttaa näkymän vierittää vaakasuoraan.,Sinun pitäisi säätää tätä sisältöä sopivaksi näkymän leveydelle, jotta käyttäjän ei tarvitse vierittää vaakatasossa.

sisältöä ei ole mitoitettu oikein, sillä viewportlighhouse audit voi auttaa automatisoimaan prosessin havaita tulvivan sisällön.

Kuvat #

kuva on kiinteät mitat, ja jos se on suurempi kuin viewport aiheuttaa vierityspalkin.Yleinen tapa käsitellä tätä ongelmaa on antaa kaikille kuville max-width100%.,Tämä aiheuttaa kuvan kutistua sopivaksi tilaa se on, jos näkymän koko on pienempi kuin kuva.Kuitenkin, koska max-width sijaan width on 100%kuva ei veny suurempi kuin sen luonnollinen koko.Se on yleensä turvallista lisää seuraava stylesheetso, että et koskaan on ongelma, jossa kuvia aiheuttaen vierityspalkin.,

Lisää mitat kuvan img-elementti #

Kun käytät max-width: 100% olet ensisijainen luonnollinen mitat kuvan,kuitenkin sinun pitäisi edelleen käyttää width ja height attribuutteja oman <img> – tagin.Tämä johtuu siitä, modernit selaimet käyttävät tätä tietoa varata tilaa imagebefore se kuormia,tämä auttaa välttämään layout muutoksia, koska sisältöä kuormia.,

Layout #

Koska näytön mitat ja leveys CSS pikseliä vaihtelevat suuresti eri laitteiden välillä(esimerkiksi puhelinten välillä ja tabletit, ja jopa eri puhelimia),sisältöä ei pitäisi luottaa erityisesti viewport leveys tehdä hyvin.

aiemmin tämä edellytti elementtejä käytetään luoda layout prosentteina.Alla olevassa esimerkissä, voit nähdä kaksi-sarakkeen asettelun, jossa leijui elementtejä, kokoinen käyttäen pikseliä.Kun näkymä tulee pienempi kuin Kokonaisleveys sarakkeet, meidän täytyy vierittää horisontaalisesti nähdä sisältöä.,

käyttämällä prosenttiosuudet leveydet, sarakkeet pysyvät aina tietty prosenttiosuus astiaan.Tämä tarkoittaa, että sarakkeet tulee kapeampi, eikä luoda scrollbar.

Moderni CSS layout tekniikoita, kuten Flexbox, Kantaverkkoon, ja Multicolmake luomista näiden joustavien verkkojen paljon helpompaa.,

Flexbox #

Tämä asettelu menetelmä on ihanteellinen, kun sinulla on joukko kohteita eri sizesand haluaisit ne sopivat mukavasti rivi tai rivit,pienempiä kohteita, ottaen vähemmän tilaa ja isommissa saada enemmän tilaa.

reagoiva suunnittelu, voit käyttää Flexbox näyttää kohteita kuin yhden rivin,tai kääritty päälle useita rivejä, koska käytettävissä oleva tila pienenee.

Lue lisää Flexbox.

CSS Grid Layout #

CSS Grid Layout mahdollistaa suoraviivainen luomaan joustavia verkkoja.,Jos ajatellaan aiemmin leijui esimerkiksi,pikemminkin kuin luoda meidän palstoja prosenttiosuudet,voisimme käyttää grid layout ja fr yksikkö,joka on osa tilaa säiliöön.

Ruudukko voidaan käyttää myös luoda säännöllinen grid ulkoasuja,jossa niin monta kuin mahtuu.Käytettävissä olevien raitojen vähenee, kun näytön koko pienenee.Alla demo, meillä on niin monta korttia kuin mahtuu jokainen rivi,jossa on vähintään koko 200px.,

Lue lisää CSS Grid Layout

Useita sarakkeen asettelun #

joidenkin layout voit käyttää Useita sarakkeen Asettelun (Mon),joka voi luoda reagoiva määrä palstoja column-width omaisuutta.Demo alla, voit nähdä, että sarakkeet on lisätty, jos siellä on tilaa vielä 200px sarake.,

Lue lisää Mon

Käytä CSS median kyselyitä reagointikykyä #

Joskus sinun täytyy tehdä enemmän laajoja muutoksia layoutto tukea tietyn näytön koko kuin tekniikoita yllä avulla.Tässä median kyselyistä tulee hyödyllisiä.

mediakyselyt ovat yksinkertaisia suodattimia, joita voidaan soveltaa CSS-tyyleihin.,Ne on helppo muuttaa tyylejä perustuu eri laite tekee sisältöä tai ominaisuuksia, että laite, esimerkiksi leveys, korkeus, suunta, kyky leijua,ja onko laitetta käytetään kosketusnäytöllä.,

tarjota eri tyylejä tulostusta,sinun täytyy kohdistaa tyyppi ulostulo, joten voit sisällyttää tyylitiedoston kanssa print tyylit seuraavasti:

Vaihtoehtoisesti voit sisällyttää tulostaa tyylejä onglemista päätyylisivutiedosto käytetään media query:

reagoivaa web-suunnittelua varten kyselemme tyypillisesti deviceinin ominaisuuksia tarjotaksemme erilaisen asettelun pienemmille näytöille tai havaitessamme, että vierailijamme käyttää kosketusnäyttöä.

Media queries, joka perustuu näkymäikkunan kokoa #

Media kyselyt, jotta voimme luoda reagoiva experiencewhere erityisiä tyylejä sovelletaan pienet näytöt, isot näytöt, ja kaikkialla välillä.Ominaisuus olemme havaita tässä on siis näytön koko,ja voimme testata seuraavia asioita.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

Media kyselyt perustuu laitteen ominaisuudet #

Annetaan erilaisia laitteita saatavilla, emme voi tehdä oletus, että jokainen suuri laite on säännöllinen desktopor kannettava tietokone, tai että ihmiset ovat vain käyttämällä kosketusnäyttö on pieni laite.,Joitakin uudempia lisäyksiä media kyselyt specificationwe voi testata ominaisuuksia, kuten tyypin osoitin käyttää vuorovaikutuksessa deviceand, onko käyttäjä voi hääriä elementtejä.

• hover
• pointer
• any-hover
• any-pointer

Yritä katselu tämä demo eri laitteissa,kuten säännöllinen työpöydän tietokoneen ja puhelimen tai tabletin.

näillä uudemmilla ominaisuuksilla on hyvä tuki kaikissa moderneissa selaimissa., Lue lisää MDN-sivuilta forhover, any-hover, pointer, any-pointer.

Käyttäen any-hover ja any-pointer #

ominaisuudet any-hover ja any-pointer testata, jos käyttäjä on capabilityto hover, tai käyttää, että tyyppi osoitin vaikka se ei ole ensisijainen tapa, jolla he ovat vuorovaikutuksessa heidän laitteen.Olla hyvin varovainen, kun käytät näitä.Käyttäjän pakottaminen siirtymään hiireen, kun he käyttävät kosketusnäyttöään, ei ole kovin ystävällistä!,Kuitenkin any-hover ja any-pointer voi olla hyödyllinen, jos se on tärkeää selvittää, millaisia laitteen käyttäjä on.Esimerkiksi kannettava, jossa on kosketusnäyttö ja ohjauslevy tulee vastata karkea ja hieno osoittimia,lisäksi kyky leijua.

miten valitaan keskeytyspisteet #

Don”t määrittelevät keskeytyspisteet laiteluokkien perusteella.Nykyään käytössä olevien laitteiden, tuotteiden, tuotemerkkien tai käyttöjärjestelmien keskeytyspisteiden määrittely voi johtaa huolto-painajaiseen.,Sen sijaan itse sisällön pitäisi määrittää, miten asettelu mukautuu konttiinsa.

Valitse suuret raja-arvot aloittamalla pieni, niin toimi nopeasti #

Suunnittelu sisältö mahtuu pieni näytön koko ensin,sitten laajentaa näyttöä, kunnes breakpoint on tarpeen.Näin voit optimoida keskeytyspisteet content ja ylläpitää mahdollisimman vähän keskeytyspisteitä.

Let”s work through the example we saw at the beginning: the weather forecast.Ensimmäinen askel on saada ennuste näyttämään hyvältä pienellä näytöllä.,

Seuraava, muuttaa selaimen, kunnes on liian paljon tyhjää tilaa elementtien välillä,ja ennuste ei yksinkertaisesti”t näytä yhtä hyvältä.Päätös on jonkin verran subjektiivinen, mutta 600px yläpuolella on varmasti liian laaja.

aseta breakpoint 600px, luoda kaksi media kyselyt lopussa oman CSS komponentti,yksi käyttää, kun selain on 600px ja alla, ja kun se on laajempi kuin 600px.

Lopulta, refactor CSS. Sisällä media-kysely max-width ja 600pxlisää CSS, joka on vain pienille näytöille., Sisällä media-kyselymin-width ja 601px lisää CSS suurempia näyttöjä.

Valitse pieniä raja-arvot, kun tarvittavat #

lisäksi valita suuret raja-arvot, kun ulkoasu muuttuu merkittävästi,se on myös hyödyllistä säätää pieniä muutoksia.Esimerkiksi suurten keskeytyspisteiden välillä voi olla hyödyllistä säätää marginaaleja tai pehmustetta elementille tai lisätä kirjasinkokoa, jotta se tuntuu luonnollisemmalta asettelussa.

antaa”S aloittaa optimoimalla pieni näytön asettelu.,Tällöin”s boost fontin, kun näkymän leveys on suurempi kuin 360px.Toiseksi, kun tilaa on riittävästi, voimme erottaa korkeat ja matalat lämpötilat niin, että ne”ovat samalla viivalla päällekkäin.Ja let ” s myös tehdä sää kuvakkeet hieman suurempi.

Samoin, sillä suuret näytöt, se”s paras rajoittaa suurin leveys ennuste panelso se ei”t kuluttaa koko näytön leveyden.,

Optimoida tekstin lukeminen #

Klassinen luettavuutta teoria ehdottaa, että ihanteellinen sarake tulisi sisältää 70 80 merkkiä per rivi(noin 8-10 sanaa).Näin ollen aina kun tekstilohkon leveys kasvaa noin 10 sanan ohi,harkitse keskeytyspisteen lisäämistä.

Anna”s ottaa syvemmälle katsomaan edellä blogikirjoitus esimerkki.Pienempiä näyttöjä, Roboto fontti on 1em toimii täydellisesti antaa 10 sanaa / rivi,mutta suuremmat näytöt vaativat murtuessa.Tässä tapauksessa, jos selaimen leveys on suurempi kuin 575px ihanteellinen sisällön leveys on 550px.,

Vältä yksinkertaisesti piilossa sisältöä #

Ole varovainen, kun valitset, mitä sisältöä haluat piilottaa tai näyttää riippuen näytön koosta.Don ”t yksinkertaisesti piilottaa sisältöä vain, koska et voi” t sovi sen ruudulla.Näytön koko ei ole lopullinen osoitus siitä, mitä käyttäjä voi haluta.Esimerkiksi, poistaa siitepölyn määrä säältä forecastcould olla vakava asia kevät-aika allergikoille, jotka tarvitsevat tiedot määrittää, jos he voivat mennä ulos tai ei.,

Näytä median kyselyn raja-arvot Chrome DevTools #

Kun olet”ve got media query raja-arvot määritetty,sinua”ll halua nähdä, miten sivustosi näyttää heidän kanssaan.Voit muuttaa selaimen ikkunan laukaisevat raja-arvot,mutta Chrome DevTools on sisäänrakennettu ominaisuus, joka tekee se helppo nähdä, miten sivu looksunder eri raja-arvot.

Voit tarkastella web-sivun ala-eri raja-arvot:

Avaa DevToolsand kytke Laitteen Tila.Tämä avautuu reagoivassa tilassa oletuksena.

nähdäksesi mediakyselyt, avaa laitetila-valikko ja valitse Näytä keskeytyspisteet värillisinä palkkeina sivusi yläpuolella.

klikkaa yhtä palkista nähdäksesi sivusi, kun kyseinen mediakysely on aktiivinen.,Klikkaa oikealla baarissa hypätä median kyselyn ” s määritelmä.

---