Как разделить файлы CSS для поддержки нескольких устройств?

Question

Я сейчас переписываю CSS для нашего сайта, так как предыдущий стал огромным раздуванием (один из файлов CSS был примерно 180 кб). Это нормально?

Мне интересно узнать, что является наиболее продуктивным & эффективным способом хранения кода CSS для веб-сайта. Из-за природы устройств в настоящее время я не думаю, что можно писать медиа-запросы для таргетинга устройств (например, responsive.smartphone.landscape, responsive.tablet.portrait и т. Д. И т. Д.). Кроме того, используя методологию точки останова, многие медиа-запросы будут перекрываться.

Я рассматриваю возможность писать файлы CSS с помощью медиа-запросов, с отдельными для медиа-запросов, которые перекрываются. Как я могу уменьшить раздувание & не нужно отправлять файлы размером 200 КБ на смартфоны или планшеты, когда только маленький код файла относится к самому устройству?

Answer 1

Для смартфонов и т. Д. Вы можете перенести медиа-запросы с-в css-файлах на элементы ссылок, как показано ниже. Таким образом, вы загружаете только один файл css для каждого.

<link rel='stylesheet' media='screen and (max-width: 320px)' href='css/mobile.css' /> 
<link rel='stylesheet' media='screen and (min-width: 321px) and (max-width: 768px)' href='css/tablet.css' /> 
<link rel='stylesheet' media='screen and (min-width: 769px)' href='css/desktop.css' /> 

Я не думаю, что IE8 или меньше будет поддерживать медиа-запросы, как это так, вы должны также обеспечить запасной вариант:

<!--[if lte IE 8]> 
<link rel='stylesheet' media='screen' href='css/desktop.css' /> 
<![endif]-->