Responsive

Schalende lettergrootte

/* 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.

[collapse]
Plaatjes

ie8:

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

Plaatje:

  img {max-width: 100%;height: auto;}  

Plaatje eventueel verder definieren voor Responsive:

  /*responsive ---------------------------------------------------------------------------------------*/  @media screen and (max-width: 980px) {  img {max-width:200px!important}  }    @media screen and (max-width: 240px) {  img {max-width:50px!important}  }  
[collapse]
Voor Suffusion
  • 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
[collapse]
Tabel

Tabel: Geef de tabel de klasse responsive en bepaal de css hiervan met:

  /*responsive tabel */  .responsive { width:100%; }  .responsive td { padding:5%; }  .responsive img { width: auto; height:auto; }  

Maak een apart stukje code voor het echte Responsive worden: als je bij een bepaalde maat wil dat de blokken onder elkaar komen.

  @media screen and (max-width: 320px) {   .responsive td { display:block; }   }  
[collapse]