I dagens verden, det er en overflod av enheter for folk å velge mellom og det kan være skremmende å prøve å imøtekomme og bygge for de beste opplevelsene på alle enheter. Det er imidlertid viktig å holde up-to-date med de mest populære størrelser og bildeoppløsninger når designe web og mobile nettsider. Et nettsted som er optimalisert og responsiv gjør for en enklere brukeren flyt og til slutt, en hyggelig opplevelse for publikum.,
skjermstørrelse, Oppløsning, og Viewport: Hva vil det bety?
Når du kjøper en enhet, vil du ofte se både skjermstørrelse og oppløsning er nevnt i spesifikasjonene. Den screensize er fysisk måling diagonalt over skjermen i tommer. Dette er ikke å forveksles med den oppløsningen, som er antall punkter på skjermen ofte vises som en bredde av høyde (dvs. 1024×768). Fordi enheter med samme skjermstørrelse kan ha svært forskjellige oppløsninger, utviklere bruke viewports når de skal lage mobile vennlige sider., Viewports er nedskalerte versjoner av vedtak som gjør det mulig nettsteder til å bli sett på mer konsekvent på tvers av ulike enheter. Viewports, er ofte mer standardisert og mindre enn oppløsning størrelser.
Mens stasjonære og bærbare skjermer er i liggende format (bredere enn høy), mange mobile enheter kan roteres for å vise nettsteder i både liggende og stående (høyere enn bred) orientering. Dette betyr at designere og utviklere må design for disse forskjellene.
Trenger hjelp til å fastslå om nettstedet ditt er responsiv? Bruk vår gratis MG verktøyet, Responsive Design Checker.,
Mens stasjonære og bærbare skjermer er i liggende format (bredere enn høy), mange mobile enheter kan roteres for å vise nettsteder i både liggende og stående (høyere enn bred) orientering. Dette betyr at designere og utviklere må design for disse forskjellene.
Responsive Design
Det ville være nesten umulig for bedrifter å designe for hver enkelt enhet. I stedet, når du programmerer responsive design, utviklere ofte:
- Gruppe styling til de fleste typisk enheten størrelser for mobiltelefoner, nettbrett og datamaskiner., I dette tilfellet, noe som er større enn 7 tommer er vanligvis vises på skrivebordet oppløsning eller-
- Bruk brytningspunkter (definert pixel bredde som vises vil justere layout basert på screen size) avhengig av design og layout
noen Ganger, en utvikler kan velge å kombinere begge metoder dersom de anser det nødvendig. Vi anbefaler at du starter ved å gruppere typisk enheten størrelser sammen.
Hvis du er en utvikler av, og er ute etter å skape den nødvendige stiler å håndtere mobile eller responsive design, nedenfor har vi tatt en bit av CSS som kunne hjelpe.,d kun brukes som en veiledning for å komme i gang:
/* start of desktop styles */
@media-skjerm, og (maks bredde: 991px) {
/* start av store nettbrett stiler */
}
@media-skjerm, og (maks bredde: 767px) {
/* start av medium tablett stiler */
}
@media-skjerm, og (maks bredde: 479px) {
/* start telefonen stiler */
}
Mest Populære Skjermoppløsninger
å Vite at det er nøkkelen til å huse for mange forskjellige enheter når du utformer websider, vi har samlet en liste over de mest up-to-date enheter med sine respektive pixel størrelser og viewports nedenfor., Vi har også sette denne informasjonen inn i en hendig nedlastbar PDF-fil.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Del med oss på Facebook!