Few months I was playing with the media query function in CSS3 and wanted to write about it but forgot. I came across this on Alistapart.com, the article being called Responsive Web Design.
The idea of media queries is very simple, this function can apply different CSS classes to specific elements of your website, depending on the width or orientation of the browser displaying it. Yes, it works especially on tablets or phones because of the orientation part. The way it works is pretty straightforward, I managed to learn it and implement it on my blog in few hours. Just try to resize the browser window right now and see how the content is rearranged.
If you are interested to learn more about media queries, go to the article on Alistapart, there is no need for me to repeat things, and then check these extra resources:
- Elastic Videos – how to make your video embeds resize as well
- CSS Transitions & Media Queries – make sure the content is rearranged through a smooth transition
- MediaQueri.es - a collection of sites using media queries
If you know other interesting resources related to media queries, let me know and I’ll update the post. I would mainly be interested to know if there is a way to control the content loaded, not just displayed. Most definitely that is not just CSS3, but it would a feature that would kill the mobile browsers completely.