Top Ten Examples Of Website Using CSS3 Media Queries

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

Large size: 3 column

 

 


Smaller size: 2 column              Smallest size: 1 column

2.Sasquatch Festival

When you resize your browser, the image will also resize and when the browser width around 480px, the layout will change

sasquatch festival to 1 columnsasquatch website sasquatch website

3. Sweet Hat Club

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

sweet helmet club website sweet helmet club website smallest size

 

4. Yiibu

When you resize the browser width, the images on its page will also resize and on its smallest size, only one column left

yiibu large size Yiibu smaller size smallest size

5. Thinkvitamin

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

Thinkvitamin large size thinkvitamin smaller size thinkvitamin smallest size

6. Lapse

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.

large size smaller size Smallest size

 

7. AlsaCreations

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.

large size alsacreations large size smallest size

 

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.

Alistapart large size alistapart smaller size smallest size

 

9. David & Goliath

The layout of David & Goliath will switch from 3 column to 2 column on its smaller size and finally left with one column only.

large size smaller size

 

10. Tee Gallery

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.

large 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:

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.

 

Related Posts:

No Comments

Add a Comment

Your email address will not be published. Required fields are marked *