Здесь официальное руководство от google, с примерами.
Для начала воспользуйтесь одним из готовых решений, примеры прилагаются. HeadJs, пожалуй, проще всего.
Сложные правила для media queries становятся сильно проще, если использовать какой-либо препроцессор стилей и миксины
Пример для раздельных Javascript с помощью enquire:
<script type="text/javascript">
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
require.ensure(['tablet.js'], function (reqiure) { require('tablet.js')});
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
require.ensure(['desktop.js'], function(require) { require('desktop.js')});
}
}).listen();
</script>
Этот пример подразумевает, что вы используете require или webpack, поддерживающие сборку догружаемых модулей. Конечно, вы можете использовать любой доступный способ инжекции скриптов и ресурсов.
Тем же способом можно подгрузить enquire, или любую другую из вышеперечисленных библиотек из cdn, не меняя серверную часть.
- Согласно этому исследованию, самым эффективным путём запрета загрузки изображений является каскадная перезапись свойства посредством @media queries