CODEWITHSUNDEEP
ipadhtmlcsstabletmedia-queries
copenndthagen
copenndthagen

Reputation: 50800

CSS Media Query for multiple resolutions

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

<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">

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 %)

Upvotes: 2

Views: 8789

Answers (1)

Jezen Thomas
Jezen Thomas

Reputation: 13800

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:

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">

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

Upvotes: 2

Related Questions