Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Media Query for multiple resolutions

CSS Media Query for multiple resolutions

Problem

I am looking at using CSS Media Query to support multiple tablets (Android/iPad). Below is the Media Query which I have;

Now my assumption is most tablets are below 1024px width. Please correct me on this front. Any tabular comparision would be great.

Also any other approaches besides device-width for media query would be fine.

I am looking at a generic way of designing my pages which would work for both desktop/tablet browsers...present and future (and may be even mobile). I am using fluid design (or called responsive design) for the same (everything in %...width/height/padding/margin all in %)

Problem courtesy of: testndtv

Solution

Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {

    /* .touch class from Modernizr */
    .touch .element {color: #fff;}

}

Or if you'd like to keep the styles in their own document:

Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.

Solution courtesy of: Jezen Thomas

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Media Query for multiple resolutions

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×