CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queries
calebo
calebo

Reputation: 3442

Specific media queries for target mobile (first), tablet & desktop

I'm building a responsive layout starting with mobile (1 column) first by default and then breakpoints for tablet in landscape & portrait mode and lastly desktop.

For my tablet (1 column) breakpoints I have.

But for desktop, the design I'm working with has a layout (2 columns) of max width 976px only.

Is it be possible to target desktop only (min-width 976px) while preventing tablet media queries from picking them up? And on desktop if it's less than 976px it should adapt to the mobile layout.

Upvotes: 4

Views: 9043

Answers (2)

polikin
polikin

Reputation: 304

Use Modernizr (http://modernizr.com/download/) to detect touch device. Modernizr will add .touch or .no-touch class to your html tag. So, for desktop, you will use .touch class to target desktop.

@media only screen and (min-width: 960px) {
    .touch .container { width: 960px; }
}

Upvotes: 3

A_AR
A_AR

Reputation: 508

I am no expert in this but I did design a website using media queries.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
It is better to stick to the query standards given here to avoid messing up your css later on when your website takes shape. 

@media only screen (min-device-width: 1024px)

This should work fine for your desktop.

Upvotes: 3

Related Questions