CSS3 Media Queries allows us to add expression to media type to check for certain conditions and apply different stylesheet. Media queries has become a hot topic among designers today. Designers able to design different style for different media used by user to visit the website. As we all know, computer display, Ipad display, smartphone, Iphone, etc has different size in their screen. If we use the same style for different screen, we can imagine how difficult it is for user to read the content of the website. Here we will give you our top choice of websites that used css3 media queries to give you more understanding and idea on media queries.
When you visit these websites, you should try to change your browser width size, and you can see how beautifully these websites change their lay out.
1. About.com
The layout of the page will switch from 3 column, to 2 column and finally one column
Large size: 3 column
Smaller size: 2 column Smallest size: 1 column
When you resize your browser, the image will also resize and when the browser width around 480px, the layout will change
to 1 column
Besides its colorful page, Sweet Hat Club has its beautiful layout changing when the media screen size different. When you resize your browser, notice that the left column disappear and finally only one column left
When you resize the browser width, the images on its page will also resize and on its smallest size, only one column left
The layout will switch to 2 column and the top navigation will change to more simple menu. On its smallest size, Thinkvitamin left with one column only and the logo will be moved to the middle and the navigation appears with different style
What I really love from Lapse is its purple color and of course its layout. The images will resize as you resize your browser width. Only one column left on its smaller size.
Alsacreations has a large header image on its large size and disappear on its smaller size. You should notice its big changing on its smallest size, the layout turn into a simple but elegant layout. I love the way they manage their main menu.
8. Alistapart – Article Example
This is an article example page of Alistapart, still with their unique style. On its smaller size you will notice that the images of people will resize to suit its screen width. Take a look at the navigation, when you on its smallest size, the navigation on the left will disappear and moved to the top.
The layout of David & Goliath will switch from 3 column to 2 column on its smaller size and finally left with one column only.
The images of t-shirt will resize as you resize the browser and switch to 3 column on its smaller size. Teegalery left with 2 column on its smallest size.
Today people use many kind of devices to access website, so it is necessary to create web design which will be appropriate to user’s screen device. Css3 media queries will allow us to use different stylesheet for different screen size. There are some good detail tutorial out there which will give you a pretty good basic understanding on media queries. Take a loot at these pages:
- Smashing Magazine
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Webdesignerwall
CSS3 Media Queries
I tried media queries on one of my website but it is not perfect yet. Visit dosenjaga.eepis-its.edu and change your browser to 480px width and you’ll see the layout will change.
2 Responses to Top Ten Examples Of Website Using CSS3 Media Queries
[...] and iPhone Simulator To Test Your Websites Tweet A couple days ago I tried to implement css media queries on one of my website. The scenario is, when the size of the screen is less than 480 pixels, my [...]
[...] contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries Tweet Be Sociable, Share! TweetRelated Posts:Top Ten Examples Of Website Using [...]