目前，对于Web应用程序，我有使用a的结构 layout.css中 平板设备的layout_medium.css 用于手机设备的layout_narrow.css
测试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)" />
测试B. 在layout.css上我包含了
的部分@import url('layout_medium.css') screen and (min-width: 481px) and (max-width:999px);
@import url('layout_narrow.css') screen and (max-width:480px);
测试B适用于桌面上的chrome和firefox但不适用于手机
测试A将始终有效，但它会使我的html头部区域变得混乱，这对我来说似乎更脏。
所以问题是： 测试B无法在手机上运行的技术原因是什么？