Исправить ширину div @media исправить для IE

Question

У меня есть div, установленный на 100% ширины, и когда страница просматривается с разрешением 1024, ширина должна измениться с 100% до 1000px, я получил правильную работу с запросами @media и отлично работает на FF, Safari Chrome. Но ie8 и ниже игнорирует это, есть ли еще попытаться заставить div изменить ширину от 100% до 1000px при разрешении 1024 на IE? Я пробовал это с jquery, но не работает.

$(document).ready(function(){
if ($(window).width() < 1024) {
    $('#content')css('width','1000px')
} else {
    $('#content')css('width','100%')
};
}

Answer 1

Медиа-запросы CSS3. Значит не поддерживается IE8 и ниже. Но посмотрите здесь, это обеспечивает поддержку медиа-запросов в IE.

Answer 2

Почему бы просто не установить это в CSS:

width: 100%;
max-width: 1000px;

Могу заверить вас, что он намного эффективнее любого решения JS/jQuery.

Answer 3

Вы можете использовать этот код:

    $(window).resize(function () {
    var width = screen.width;
    var height = screen.height;
    if (width <= 1024) {
        //somecode
    } else {
        //somecode

    }
 });

однако, как отметил Свен Бидер, CSS Media Queries лучше, чем для адаптивного дизайна.

Answer 4

$(document).load($(window).bind("resize", changeWidth));

function changeWidth( e ) {
    if($(window).width()<1024)
    {
        $('#content').css('width','1000px');
    } else {
        $('#content').css('width','100%');
    }
}

jsFiddle