i dagens värld finns det en uppsjö av enheter för människor att välja mellan och det kan vara skrämmande att försöka rymma och bygga för de bästa upplevelserna på alla enheter. Det är dock viktigt att hålla dig uppdaterad med de mest populära skärmstorlekarna och upplösningarna när du utformar webb-och mobilwebbplatser. En webbplats som är optimerad och lyhörd ger ett enklare användarflöde och i slutändan en trevlig upplevelse för din publik.,
skärmstorlek, upplösning och visnings: vad betyder allt det?
När du köper en enhet ser du ofta både skärmstorlek och upplösning som anges i specifikationerna. Skärmarna är den fysiska mätningen diagonalt på skärmen i tum. Detta ska inte förväxlas med upplösningen, vilket är antalet pixlar på skärmen som ofta visas som en bredd i höjd (dvs 1024×768). Eftersom enheter med samma skärmstorlek kan ha mycket olika upplösningar använder Utvecklare viewports när de skapar mobila vänliga sidor., Viewports skalas ner versioner av upplösningar som gör att webbplatser kan ses mer konsekvent över olika enheter. Viewports är ofta mer standardiserade och mindre än upplösningsstorlekar.
medan stationära och bärbara skärmar är i liggande orientering (bredare än lång), kan många mobila enheter roteras för att visa webbplatser i både liggande och stående (högre än bred) orienteringar. Detta innebär att designers och utvecklare måste utforma för dessa skillnader.
behöver du hjälp med att avgöra om din webbplats är responsiv? Använd vår gratis MG verktyg, lyhörd Design Checker.,
medan stationära och bärbara skärmar är i liggande orientering (bredare än lång), kan många mobila enheter roteras för att visa webbplatser i både liggande och stående (högre än bred) orienteringar. Detta innebär att designers och utvecklare måste utforma för dessa skillnader.
Responsive Styling
det skulle vara nästan omöjligt för företag att designa för varje enskild enhet. Istället, när du programmerar responsiva mönster, utvecklare ofta:
- gruppera styling i de mest typiska enhetsstorlekar för telefoner, tabletter och stationära datorer., I det här fallet visas vanligtvis allt större än 7 tum vid skrivbordsupplösning eller –
- använd brytpunkter (definierade pixelbredder som skärmen justerar layout baserat på skärmstorlek) beroende på design och layout
Ibland kan en utvecklare välja att kombinera båda metoderna om de anser det nödvändigt. Vi rekommenderar att du börjar med att gruppera typiska enhetsstorlekar tillsammans.
om du är en utvecklare och vill generera de nödvändiga stilar för att hantera mobil eller lyhörd styling, nedan har vi inkluderat ett utdrag av CSS som kan hjälpa.,d endast användas som en guide för att komma igång:
/* start of desktop styles */
@media screen och (max-width: 991px) {
/* start av stora tablettstilar */
}
@media screen och (max-width: 767px) {
/* start av medelstora tablettstilar */
}
@media screen och (max-width: 479px) {
/* start av telefon stilar */
}
mest populära skärmupplösningar
att veta att det är nyckeln till att rymma för de många olika enheter när du utformar webbplatser, Vi har sammanställt en lista över de mest up-to-date enheter med sina respektive pixelstorlekar och viewports nedan., Vi har också lagt denna information till en praktisk nedladdningsbar PDF.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Dela med oss på Facebook!