<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?
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.
max-device-width of, potentially(1), > 2560px? What devices are you planning to exclude with this media query? And if you're not excluding anything, or specifying something in particular, there's no reason to use media queries. (1) I hadn't thought about it, but I'm quite sure there are larger pixel-density monitors, I just couldn't think of one, off the top of my head.The code you have should already pretty much work for desktops, as the media query "(min-device-width: 768px)" is everything with width greater than 768px: tablets, desktops, devices that lie, etc. (Of course, that's assuming the browser supports media queries at all, something that may not be true more often than you'd wish.)
That said, I see four possible problems:
First, some cellphones place themselves in category "handheld" rather than category "screen", so "only screen ..." won't match and no CSS at all will be sent to the device. One possible solution is to specify "only all ..." instead. (This also sidesteps the problem of not having any CSS at all for printing.)
Second, for best performace you may want to put all your CSS and media queries in one file (use @media ...[query]... { CSS statements; } blocks) rather than specifying media queries on HTML statements and so having multiple CSS files. Every CSS file -including those disabled by their media queries- will always be downloaded; this can take substantial networking bandwidth.
Third, there's no "fallback" for the inevitable devices that won't be categorized at all. Most often each web page should include either one block of CSS or one <link... statement withOUT a media query to supply the default/fallback CSS, then other CSS should either build on top of that CSS or override it.
And fourth, device dimensions in pixels are often wildly distorted either by very-high-density displays or by the newish "viewport". As a result some smartphones will seem to be tablets according to your tests. Device pixel density can be accommodated in your logic. "Viewport" can and should be controlled by a "meta" statement, as the usual defaults make it "work" no matter what but at the expense of generally not properly handling more intelligent responsive layouts.
(For an alternative approach to lack of support for media queries, media query variability, and the density problem, see http://www.ckollars.org/alternative-to-media-queries.html)
