Tobiasz Glazar
obiekt ÷ kontekst = wynik
tak jak Bóg i Photoshop przykazali
To elastyczna siatka (z elastycznymi grafikami) wykorzystująca media queries do stworzenia adaptacyjnego layoutu.
body {
font-size: 100%; /* o tu; ~16px */
font-family: Arial, Verdana sans-serif;
}
#page {
max-width: 988px; /* i tu */
/* można też w %: 988px ÷ 16px = 61.75% */
}
#title {
font-size: 1.5em; /* 24px ÷ 16px = 1.5em */
margin: 0 0 0 14.575%; /* (124px + 20px) ÷ 988px = 0.14575 */
width: 70.85%; /* 700px ÷ 988px = 0.7085 */
}
img, video, object {
width: 100%; /* dla IE6 */
max-width: 100%;
}
AlphaImageLoader() dla IE<link rel="stylesheet" type="text/css" href="style.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 320px)">
@media screen and (max-width: 320px) {
...
}
obiekt ÷ kontekst = wynik