Responsive

Websites ses efterhånden lige meget på mobile enheder som på alm computere – hvilket stille krav om at et website skal være let tilgængelig på flere forskellige skærmstørrelser. Derfor bør et website midst have 3 designs som tager højde for mobiltelefoner, tablets og endelig standard skærm størrelse på laptops og desktops.

Man gør websider responsive vha de såkaldte media queries hvis man i sit stylesheet skriver:

@media (max-width: 960px) {
h1 {
font-size: 36px;
}
}
 
@media (max-width: 600px) {
h1 {
font-size: 28px;
}
}

læg mærke til de ekstra tuborg parenteser hvor man skrive de ændringer til de indlæste stylesheet som vil passe til den angivne skærmbredde.

Der er forskellige strategier man kan anlægge i udviklingsfasen . Er sitet fx henvendt til mobile brugere skal man starte med at tage højde for det.

men ofte udvikles der til 960px eller 940px i første omgang – herefter laver man stylesheet til smartphones fra 320px til 480px – og så fra 481 til 768 til tablets.

@media (max-width: 768px) {
 
/*Her de styles som skal tilrettes*/
 
}
 
@media (max-width: 480px) {
/*Her de styles som skal tilrettes fx skal float sætte til none så en horisontal menu bliver vertikal sektioners bredde sættes fx til 100% og lægge under hinanden - store tunge billeder skjules ect. */
 
}

Den helt store model kunne se sådan ud: 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Leave a Reply