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

Ein Gedanke zu „Responsive Design: Media Query“

  1. I also agree that it is not good to be loading PHP for every style sheet. If you load one PHP page with two dyiamnc‘ style sheets, that’s 3 PHP calls for every loaded page, for every visitor. That will add up real quick if/when your website starts to pull traffic.The best thing to do is leave the stylesheets static. If you need to add dyiamnc style information, include it in the actual web page in style tags.cigraphics is on the right track for re-generating static style sheets when changes are made to the website, but then you have to worry about browsers caching their CSS sheets because they are expected to be static. I know there are workarounds for that, but why worry about it? Just include any dyiamnc content in the main web page.

Schreibe einen Kommentar