nykymaailmassa, on olemassa lukuisia laitteet ihmiset to valita ja se voi olla pelottava yrittää sijoittaa ja rakentaa parhaat kokemukset kaikissa laitteissa. Web-ja mobiilisivustoja suunniteltaessa on kuitenkin tärkeää pysyä ajan tasalla suosituimpien näyttökokojen ja-resoluutioiden kanssa. Sivusto, joka on optimoitu ja reagoiva, helpottaa käyttäjävirtaa ja lopulta, miellyttävä kokemus yleisölle.,
näytön koko, resoluutio ja näkymä: mitä se kaikki tarkoittaa?
Kun ostat laitteen, sinun usein nähdä sekä näytön koko ja resoluutio luetellut tiedot. Screensize on fyysinen mittaus vinottain näytön tuumaa. Tätä ei pidä sekoittaa päätöslauselman, joka on määrä pikseleitä ruudulla usein näkyviin, kuten leveys korkeus (eli 1024×768). Koska laitteita saman näytön koko voi olla hyvin erilainen päätöslauselmia, kehittäjät käyttävät näkymäikkunoissa, kun he luovat mobile ystävällinen-sivuja., Viewports on skaalattu alas versioita päätöslauselmia, joiden avulla sivustoja voidaan tarkastella johdonmukaisemmin eri laitteissa. Viewports on usein standardoitu ja pienempi kuin resoluutiokoot.
Vaikka työpöydälle ja kannettava tietokone näytöt ovat vaakasuunnassa (leveämpi kuin pitkä), monet mobiililaitteet voidaan kääntää osoittamaan sivustot sekä maisema ja muotokuva (pitempi kuin leveä) suuntaviivat. Tämä tarkoittaa, että suunnittelijoiden ja kehittäjien on suunniteltava nämä erot.
Tarvitsetko apua, jos sivustosi reagoi? Käytä ilmainen MG työkalu, reagoiva suunnittelu Checker.,
Vaikka työpöydälle ja kannettava tietokone näytöt ovat vaakasuunnassa (leveämpi kuin pitkä), monet mobiililaitteet voidaan kääntää osoittamaan sivustot sekä maisema ja muotokuva (pitempi kuin leveä) suuntaviivat. Tämä tarkoittaa, että suunnittelijoiden ja kehittäjien on suunniteltava nämä erot.
Reagoiva Muotoilu
– Se olisi lähes mahdotonta yrityksille suunnitella jokaisen yksittäisen laitteen. Sen sijaan, kun ohjelmointi reagoiva malleja, kehittäjät usein:
- Ryhmä muotoilu osaksi tyypillisin laitteen kokoa puhelimet, tabletit ja työpöytiä., Tässä tapauksessa, mitään suurempi kuin 7 tuumaa on yleensä näytetään työpöydän resoluutio tai-
- Käytä raja-arvot (määritelty pikselin levyisiä, että näyttö säätää ulkoasu perustuu näytön koko) riippuu suunnittelu ja layout
Joskus, kehittäjä voi valita, yhdistää molempia menetelmiä, jos ne pitävät sitä tarpeellisena. Suosittelemme aloittamaan ryhmittelemällä tyypilliset laitekoot yhteen.
Jos olet kehittäjä ja haluavat tuottaa tarvittavat tyylit käsitellä mobiili-tai reagoiva muotoilu, alla olemme mukana pätkä CSS, joka voisi auttaa.,d voidaan käyttää vain oppaana pääset alkuun:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* aloittaa suurten tabletti tyylejä */
}
@media screen and (max-width: 767px) {
/* aloita keskipitkän tabletti tyylejä */
}
@media screen and (max-width: 479px) {
/* käynnistä puhelimen tyylejä */
}
Suosituimmat näyttöresoluutioilla
Tietäen, että se on avain mahtuu monia erilaisia laitteita suunniteltaessa sivustot, olemme koonneet listan kaikkein up-to-date laitteiden omien pikselin kokoisia ja viewports alla., Olemme myös laittaneet nämä tiedot kätevä ladattava PDF.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Jaa kanssamme Facebook!