Media Queries

De Media Queries bepalen de eigenschappen van de individuele blokken binnen een aantal breedtes.
Deze breedtes kun je zelf bepalen maar handiger is om de afmetingen van de gebruikte breedtes binnen de te gebruiken apparaten aan te houden.
Dat betekent telefoons, tablets en desktops.

 

/* max-width  480 ======================================== */
@media only screen and (max-width: 480px) {
   .col { color: Black ; padding:0 8px 0 8px; ; margin:0; 	}
    h1 { font-size: 1.8rem; line-height: 1; letter-spacing: -.1rem; color: #555555 ; padding: 10px 0 10px 0; margin: 0; }
    h2 { font-size: 1.6rem; line-height: 1; letter-spacing: -.1rem; color: #555555 ; padding: 10px 0 10px 0; margin: 0; }  
    p { font-size: 10pt; }  
}

/* min-width 480   <->  max-width: 768 =================== */
@media only screen and (min-width: 480px) and (max-width: 768px) {
   .col { color: Black ; }
}

/* min-width 768   <->  max-width: 1024 ================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) { 
   .col { color: Black ;	}
}

/* min-width  1024 ======================================= */
@media only screen and (min-width: 1024px) {
   .col { color: Black ; }	
}

 

 

Baai

voorbeeld 1

Road at night De afbeelding van een baai. Een strandje aan de rand van dorpje.

Wissels

voorbeeld 2

Coffee shop Spoor wissels in een bergachtig dorp in Zwitserland.

Palm

voorbeeld 3

Road at night Een palmboom aan de rand van een meer.

Vlag

voorbeeld 4

Coffee shop Zwitserse vlag in een vallei.

Soep

voorbeeld 5

Coffee shop Eem heerlijke soep met kaas en stokbrood.