4
votes

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.

  • @media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
  • @media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)

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.

2
The problem with specific sizes aimed at devices is that they may change. It's best to use natural breakpoints as explained in the answer I gave to a similar question.Dave Everitt

2 Answers

3
votes

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; }
}
3
votes

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.