В настоящее время для веб-приложения у меня есть структура использования
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)" />
Тест Б
на 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, но не на телефонах
Тест А всегда будет работать, но тогда он загромождает мою область головы html, которая кажется мне более грязной.
Так что вопрос такой:
По какой технической причине тест Б не будет работать на телефонах?