i dagens verden er der en overflod af enheder, som folk kan vælge imellem, og det kan være skræmmende at forsøge at rumme og bygge for de bedste oplevelser på alle enheder. Det er dog vigtigt at holde sig ajour med de mest populære skærmstørrelser og opløsninger, når du designer webeb-og mobil sitesebsteder. Et siteebsted, der er optimeret og lydhør, giver en lettere brugerflo.og i sidste ende en fornøjelig oplevelse for dit publikum.,
skærmstørrelse, opløsning og visning: hvad betyder det hele?
Når du køber en enhed, vil du ofte se både skærmstørrelse og opløsning angivet i specifikationerne. Skærmstørrelsen er den fysiske måling diagonalt af skærmen i tommer. Dette må ikke forveksles med opløsningen, som er antallet af Pi .els på skærmen, der ofte vises som en bredde efter højde (dvs.1024 7 768). Da enheder med samme skærmstørrelse kan have meget forskellige opløsninger, bruger udviklere visningsports, når de opretter mobilvenlige sider., Vie .ports er nedskaleret versioner af opløsninger, der gør det muligt at se sitesebsteder mere konsekvent på tværs af forskellige enheder. Vie .ports er ofte mere standardiserede og mindre end opløsningsstørrelser.
mens stationære og bærbare skærme er i liggende retning (bredere end høje), kan mange mobile enheder drejes for at vise websebsteder i både liggende og stående (højere end brede) orienteringer. Det betyder, at designere og udviklere skal designe for disse forskelle.brug for hjælp til at bestemme, om dit websiteebsted er lydhør? Brug vores gratis MG værktøj, Responsive Design Checker.,
mens stationære og bærbare skærme er i liggende retning (bredere end høje), kan mange mobile enheder drejes for at vise websebsteder i både liggende og stående (højere end brede) orienteringer. Det betyder, at designere og udviklere skal designe for disse forskelle.Responsive Styling
det ville være næsten umuligt for virksomheder at designe for hver enkelt enhed. I stedet for, når du programmerer responsive designs, udviklere ofte:
- gruppere stylingen i de mest typiske enhedsstørrelser til telefoner, tablets og desktops., I dette tilfælde, noget større end 7 tommer er normalt vises på en desktop løsning eller-
- Brug breakpoints (defineret pixel bredde, at skærmen vil justere layout baseret på skærmstørrelse) afhængig af design og layout
nogle gange, en udvikler kan vælge at kombinere begge metoder, hvis de skønner det nødvendigt. Vi anbefaler at starte med at gruppere typiske enhedsstørrelser sammen.
Hvis du er en udvikler og søger at generere de nødvendige stilarter til at håndtere mobil eller lydhør styling, har vi nedenfor inkluderet et uddrag af CSS, der kan hjælpe.,d kun bruges som en guide til at komme i gang med:
/* start of desktop styles */
@media-skærmen og max-width: 991px) {
/* start af store tablet-styles */
}
@media-skærmen og max-width: 767px) {
/* start af medium tablet styles */
}
@media-skærmen og max-width: 479px) {
/* start af telefonen styles */
}
Mest Populære skærmopløsninger
Vide, at det er nøglen til at rumme de mange forskellige enheder, når designe hjemmesider, vi har samlet en liste over de mest up-to-date udstyr med deres respektive pixel-størrelser, og skærmbilledet nedenfor., Vi har også lagt disse oplysninger i en praktisk do .nloadbar PDF.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Del med os på Facebook!