Vælg en side

Responsive web design

Når vi surfer på nettet, bruger vi idag mange forskellige platforme. Computere, tablets og smartphones. Dette giver webudviklere en udfordring i at sørge for at en hjemmesides indhold bliver vist fornuftigt på alle gængse platforme. Og her er CSS (Stylesheets) en stor hjælp. Jeg har herunder et rigtigt godt eksempel på en inddeling af et stylesheet der tager hensyn til de forskellige formater:


/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Indsæt styles */
}
 
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
  /* Indsæt styles her */
}
 
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
  /* Indsæt styles her */
}

/* iPhone 4  */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Indsæt styles her */
}
 
/* iPads (portrait and landscape)  */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Indsæt styles her */
}
 
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Indsæt styles her */
}
 
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Indsæt styles her */
}
 
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
  /* Indsæt styles her */
}
 
/* Large screens  */
@media only screen and (min-width : 1824px) {
  /* Indsæt styles her */
}

Så hvis du designer dine sider kan du forberede dit indhold således at både en almindelig computer skærm og en smartphone bruger får den samme oplevelse.

Share This