Responsive

/* de grootste maat is de default */
body { font-size: 90%; } /* zeg maar 14px ongeveer */
/* middenmaatje */ @media (max-height: 650px), (max-width: 1200px) { body { font-size: 85%; } } /* tablet maat ofzo */ @media (max-height: 550px ), (max-width: 1000px ) { body { font-size: 80%; } } /* telefoons */ @media (max-height: 320px ), (max-width: 480px ) { body { font-size: 70%; } } Of in percentages, alleen voor de body: 100% tot 700px min-width, 110% bij 800px, 120% bij 900px, 130% bij 1000px 140% bij 1100px.

ie8:

[code] @media \0screen {
img {
width: auto; /* for ie 8 */
}
}
[/code]

Plaatje:
[code] img {max-width: 100%;height: auto;}
[/code]

Plaatje eventueel verder definieren voor Responsive:
[code title=”@media”] /*responsive —————————————————————————————*/
@media screen and (max-width: 980px) {
img {max-width:200px!important}
}

@media screen and (max-width: 240px) {
img {max-width:50px!important}
}
[/code]

• Layouts: vinkje zetten bij Responsive
• Other graphical elements: navigation bar and its contens style: are aligned with your main page
• Header: inside your main wrapper

Tabel: Geef de tabel de klasse responsive en bepaal de css hiervan met:
[code] /*responsive tabel */
.responsive { width:100%; }
.responsive td { padding:5%; }
.responsive img { width: auto; height:auto; }
[/code] Maak een apart stukje code voor het echte Responsive worden: als je bij een bepaalde maat wil dat de blokken onder elkaar komen.
[code] @media screen and (max-width: 320px) {
.responsive td { display:block; }
}
[/code]