CSS-запросы СМИ по сравнению с JavaScript

Question

У меня есть CSS3 Media Queries в моей таблице стилей для настройки для небольших и больших экранов. Мобильные устройства не заботятся об этом проекте.

IE8 является наиболее часто используемым устройством посетителями веб-сайта и нуждается в поддержке. Я не вижу IE8, поддерживающий запросы CSS3 Media в моих тестах.

Есть ли непредвиденные последствия преобразования медиа-запросов в JavaScript? Могу ли я сохранить оба?

Media Queries:

@media only screen 
and (max-width : 800px) { 
    body { 
     font-size: 8pt; 
     line-height: 1.4em; 
     } 
    #header h1 { 
     width: 48% !important; 
    } 

    .inner { 
     width: 95% !important; 
    } 

    #feature { 
     height: 23em !important; 
    } 

    #feature .overlay { 
     font-size: 120% !important; 
     line-height: 1.3em !important; 
    } 

    #feature .overlay h1 { 
     font-size: 150% !important; 
     line-height: 1.2em !important; 
    } 
} 

@media only screen 
and (max-width : 1024px) { 
    body { 
     font-size: 9pt; 
     line-height: 1.4em; 
     } 
    #header h1 { 
     width: 46% !important; 
    } 

    .inner { 
     width: 95% !important; 
    } 
} 

@media only screen 
and (min-width : 1600px) { 
    body { 
     font-size: 14pt; 
     line-height: 1.4em; 
    } 

    .inner { 
     width: 82% !important; 
    } 
} 

Предлагаемое изменение CSS:

body.small { 
    font-size: 8pt; 
    line-height: 1.4em; 
    } 
.small #header h1 { 
    width: 48% !important; 
} 

.small .inner { 
    width: 95% !important; 
} 

.small #feature { 
    height: 23em !important; 
} 

.small #feature .overlay { 
    font-size: 120% !important; 
    line-height: 1.3em !important; 
} 

.small #feature .overlay h1 { 
    font-size: 150% !important; 
    line-height: 1.2em !important; 
} 


body.medium { 
    font-size: 9pt; 
    line-height: 1.4em; 
    } 
.medium #header h1 { 
    width: 46% !important; 
} 

.medium .inner { 
    width: 95% !important; 
} 


body.highdef { 
    font-size: 14pt; 
    line-height: 1.4em; 
} 

.highdef .inner { 
    width: 82% !important; 
} 

Предлагаемое изменение JavaScript:

$(document).ready(function(){ 
    check_dimensions(); 
    $(window).on("resize", function(){ 
     check_dimensions(); 
    }); 
}); 

function check_dimensions(){ 
    var outer_width = $(this).outerWidth(); 

    $("body").removeClass(); 
    if (outer_width >= 1600){ 
     $("body").addCass("highdef"); 
    } else if (outer_width <= 800){ 
     $("body").addClass("small"); 
    } else if (outer_width > 800 && outer_width <= 1024){ 
     $("body").addClass("medium"); 
    } 
} 

Я знаю, этот вопрос коренится в теории и, возможно, не является подходящим, пригодный для SO, но надеюсь, что некоторые из вас могут быть мысли, прежде чем голосовать, чтобы закрыть ;)

Answer 1

Существует замечательный сценарий, который делает медиа-запросы для работы на более старый браузер. Here является ссылкой на Respond.js Надеюсь, что эта помощь!