Best way to include CSS styles for mobile devices?

Question

Currently for a Web Application I have the structure of using a layout.css layout_medium.css for tablet devices layout_narrow.css for phone devices

Test A:

<link type="text/css" rel="stylesheet" href="/project/assets/css/layout.css" />
<link type="text/css" rel="stylesheet" href="/project/assets/css/layout_medium.css" media="only screen and (min-width: 481px) and (max-width: 999px)" />
<link type="text/css" rel="stylesheet" href="/project/assets/css/layout_narrow.css media="only screen and (max-width: 480px)" />

Test B on layout.css I include the parts for

@import url('layout_medium.css') screen and (min-width: 481px) and (max-width:999px);
@import url('layout_narrow.css') screen and (max-width:480px);

Test B works on desktop for chrome and firefox but not on phones

Test A will always work, but then it clutters up my html head area which seems more dirty to me.

So the question is: What is the Technical reason that Test B won't work on phones?

Answer 1

I think the best background is this very good quirksmode article series that explains viewports on mobile on how they're different than desktop. Read carefully!