Conditional CSS and Media Queries

Question

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

Above is my conditional CSS, it loads in one style sheet for a phone, and another for a tablet but how can I get it to use the tablet stylesheet when viewing on a computer?

Answer 1

Just an obvious answer, really, but the media-query is the only thing restricting that stylesheet to use on tablets.

Removing that media-query would open it up for use on desktop (and any other applicable devices) bearing in mind the usual rules for CSS specificity; the later-declared styles overrule the earlier-declared styles; so if you want the tablet styles to override the normal desktop CSS files, you really must declare it/import it/link it later in the document. Still in the head, I'd imagine, but after the others you want to override.

It's also worth remembering that, certainly for smart-phones but I'm not sure about tablets, they may have custom GUI elements for, among other things, form elements. So the translation from desktop-to-tablet (even for dev purposes) may not be quite as seamless as you, or we, might hope.