Responsive Design: Media Query

Unter Responsive Design versteht man die dynamische Anpassung des Webseiten-Layouts an das Darstellungsmedium. Beispielsweise wird das GitHub-Ribbon in der oberen rechten Ecke erst ab einer Breite von 500 Pixeln angezeigt. Dafür ist dieser Code verantwortlich:

Style-Angabe

<style type="text/css"> @media all and (max-width: 500px) { #github_ribbon { display:none; } } </style>

HTML

<a href="https://github.com/sklueh"><img id="github_ribbon" style="z-index:2; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

50 hilfreiche Werkzeuge zum Thema Responsive Design:
50 fantastic tools for responsive web design