Responsive webdesign: verschil tussen versies

Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele grids,<ref name="fluid grids">Ethan Marcotte, [http://alistapart.com/article/fluidgrids "Fluid Grids"], ''A List Apart'', 3 maart 2009</ref> flexibele afbeeldingen<ref name="fluid images">Ethan Marcotte, [http://alistapart.com/article/fluid-images "Fluid Images"], ''A List Apart'', 7 juni 2011</ref> en [[CSS 3|CSS3]] media query'squeries.<ref>W3C, [http://www.w3.org/TR/css3-mediaqueries "W3C Recommendation: Media Queries"], "W3C", 19 juni 2012</ref> Enkele van de door Marcotte bedachte technieken zijn:

=== Media query'squeries ===

Media query'squeries geven de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen. Meestal wordt de breedte van het scherm als uitgangspunt genomen.<ref>Jay Bryant, Mike Jones [http://link.springer.com/chapter/10.1007/978-1-4302-4525-4_4 "Pro HTML5 Performance"], p38 2012, ISBN 978-1-4302-4524-7</ref> Ook kan de website rekening houden met de pixeldichtheid van een scherm,<ref>Mozilla, [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries "CSS media queries"], "Mozilla Developer Network"</ref><ref>Walt Grayson, [http://www.iwalt.com/weblog/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries "Targeting the iPhone 4 Retina Display with CSS3 Media Queries"], "iWalt", 23 juni 2010</ref> om bijvoorbeeld afbeeldingen op een hogere resolutie te laden.