このコードは@import
、解像度に応じて CSS を変更するスタイルスイッチャーです。Firefox と Chrome ではうまく機能しますが、IE (IE7、IE8、IE9) では機能しません。
chaché をクリアし、html を正常に検証しました。なぜ機能しないのかわかりません:(
関連する HTML:
<!doctype html>
<!--Typical stuff, (<head>, <meta>, etc) here -->
<style type="text/css">@import url('css/MQ.css');</style>
Javascript:
$(document).ready(function() {
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$('style:contains("MQ")').text(function () {
return $(this).text().replace(/\d*MQ\.css/, "400MQ.css");
});
} else if ((width >= 701) && (width < 900)) {
$('style:contains("MQ")').text(function () {
return $(this).text().replace(/\d*MQ\.css/, "800MQ.css");
});
} else {
$('style:contains("MQ")').text(function () {
return $(this).text().replace(/\d*MQ\.css/, "MQ.css");
});
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
});
(私のクライアントは pollyfill を必要としないため、メディアクエリを使用して作業を行うことはできません。)