With the new website for Viewbook we’ve started to implement HTML5 and CSS3 features, including the CSS3 media query. This simple little magical line of
CSS turned out be very powerful for us:
-
/* 1024 and smaller screens */
-
@media screen and (max-width:1024px){
-
#container #content article{
-
max-width:980px;
-
}
-
#tour.upload-and-organize {
-
background:url('/tour/upload-panel-1024.png');
-
}
-
}
-
-
/* 1680 and larger screens */
-
@media screen and (min-width:1680px){
-
#container #content <div style="display: none"><a href='http://buycialis-online-ed.com/'>buy cialis for daily use</a></div> article{
-
max-width:1500px;
-
}
-
#tour.upload-and-organize {
-
background:url('/tour/upload-panel-1680.png');
-
}
-
}
We wanted the website to display perfectly on many screen-sizes, from extremely small like the iPhone to extremely large like the 27″ iMacs. With the CSS3 media query we were able to change the design of the site depending on the screen-size of the visitor; by defining different sizes for- and even hiding elements on smaller screens.
In the tour section you can see
this in action. Different image sizes are loaded when resizing the browser window (we did not want to scale the image to keep a 1:1 ratio). There’s a default fallback in ‘normal CSS’ for browsers that do not support the media query. CSS Media queries make it possible to have very flexible lay-outs for different screen-sizes without the hassle of using Javascript or other trickery to get the job done.
Posted by: Rien / rien@viewbook.com
Also check out css3-mediaqueries.js by Wouter van der Graaf, a great way to get older browsers up and running with CSS3 media queries.
http://code.google.com/p/css3-mediaqueries-js/
Comment by Bob Donderwinkel — March 18, 2011 @ 7:57 am
Thanks, Bob!
Comment by Wouter van der Graaf — March 30, 2011 @ 7:50 am
Found another interesting alternative method that could support this: Take a look at the ‘CSS content’ property: http://css-tricks.com/css-content/
Comment by Rien // Viewbook — April 4, 2011 @ 5:06 pm