Return to Test Drive Home

CSS3 Media Queries

CSS3 Media queries enable you to style a page based on different display surface factors such as width, height, orientation, resolution, etc. Try visiting this page on your mobile device and your desktop browser to see the difference.

Cool Travel Photos

Optimized for Mobile!

Optimized for your Netbook!

Optimized for large screens!

I took all these photos at different interesting spots while vacationing. Let me know what you think of them.

Skagit Valley Tulip Festival

Skagit Valley

Skagit Valley is located about an hour an a half north of seattle. April is when the tulips are blooming. There are so many tulips that from a distance the ground looks like it's painted.

huge field of red tulips with mountains in the background closeup of a tulip surrounded by other tulips

Olympic Sculpture Park, The Eagle

The Eagle

The Olympic Sculpture park is one of my favorite places to visit in Seattle. I take all my out of town guests here. I took this photo during the grand opening weekend of the park, January 2007.

Alexander Calder's sculpture the Eagle at dusk, looking out on Eliot bay, lots of people around it. closeup of Calder's sculpture the Eagle

Grandfather Mountain, North Carolina

Grandfather Mountain

This is just a photo of a cool old street sign pointing to Grandfather Mountain in North Carolina.

huge old yellow street sign which says Grandfather Mountain 6 miles left.  closeup of huge old street sign to Grandfather Mountain

The Pink House, Oak Bluffs, MA

The Pink House

This is the Pink House located in the Martha's Vineyard Camp Meeting Association Camp Ground community. The house was build in 1864. It has 2 bedrooms, 770 square feet

Pink house with white filagree trim.  Some trim in darker shade of pink closeup of pink house with white filagree trim.

CSS3 Media Queries enable web authors to selectively style their page based on properties of the media where the page is being displayed. For example, a web author could choose to style their page differently when it is displayed on the screen versus when it "displayed" on a print medium. Going further, web authors can now choose to style their page differently when it is displayed on a small screen such as a phone versus when it is displayed on a widescreen monitor.

Here is the syntax to use a media query:

@media screen and (max-width:400px) { div {border:none;}}
In this declaration, screen is the media type and max-width is the media property. The declaration states that the rules inside are only to be applied when the webpage is displaying on a screen with a width of at most 400px. There are many other media properties defined by CSS3 Media queries including width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome and resolution and many of these properties accept min or max as a prefix. Media properties can be used together to create very specific queries, for example: screen and (max-width:400px) and (max-height:600px).

This page uses media queries to change the layout of the page based on the width. As you change the width of the page, the media queries change the layout of the page to use more or less columns, longer or shorter titles and larger or smaller images. The following media queries are defined for this page:

@media (min-width:950px)
@media (min-width:450px) and (max-width:950px)
@media (max-width:899px)
@media (max-width:450px)