Асинхронная загрузка CSS
 

Нужно сделать асинхронную загрузку CSS с помощью jQuery.
Делаю так:

<script>
$(document).ready(function() {
	    $("head").append("<link href='/wp-content/themes/theme1971/css/normalize.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' >");
		 $("head").append("<link href='wp-content/themes/theme1971/style.css' rel='stylesheet' >");
       	 $("head").append("<link href='/wp-content/themes/theme1971/css/mobile1.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/prettyPhoto.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/grid.css' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/slider.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/timer.css' rel='stylesheet' >");
	});

	</script>

Но как для некоторых стилей прописать media запросы CSS? Делаю так, но не работает.

<script>
$(document).ready(function() {
	    $("head").append("<link href='/wp-content/themes/theme1971/css/normalize.css' rel='stylesheet' >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' @media screen and (max-width: 767px) >");
		$("head").append("<link href='wp-content/themes/theme1971/style.css' rel='stylesheet'  @media screen and (min-width: 1366px) >");
        $("head").append("<link href='/wp-content/themes/theme1971/css/mobile1.css' rel='stylesheet'  media=screen and (min-width: 768px) and (max-width: 1365px)>");
        $("head").append("<link href='/wp-content/themes/theme1971/css/prettyPhoto.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/grid.css' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=BenchNine:400,700,300' rel='stylesheet' >");
		$("head").append("<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/slider.css' rel='stylesheet' >");
		$("head").append("<link href='/wp-content/themes/theme1971/css/timer.css' rel='stylesheet' >");
	});

	</script>

попробуйте так:

$("head").append("<link href='/wp-content/themes/theme1971/css/mobile.css' rel='stylesheet' media='handheld,only screen and (max-device-width:767px)' >");