Разные CSS для разных размеров браузера

Question

У меня есть вопрос об оконно-зависимых CSS. Это очень распространенный вопрос, но почему-то он не работает для меня, с Wordpress. Во всяком случае, на данный момент я использую сценарий, предложенный Nettuts. Я просто хочу использовать разные стили CSS, когда пользователь изменяет размер своего окна. Я знаю, что для этого мне нужно использовать $ (window) .width. Теперь у меня есть:

function checkWindowSize() {

    if ( $(window).width() < 800 ) {
        $('body').addClass('small');
    }
    else {
        $('body').removeClass('small');
    }

}

$(window).resize(checkWindowSize);

Это, безусловно, делает работу. Но .. Есть небольшой глюк. Когда я изменяю размер окна, оно нацеливается на другой стиль CSS. Но когда я оставляю окно меньшего размера, чем 800, нажимаю F5 (обновить), мне нужно вручную изменить размер окна (для 1 пикселя), прежде чем произойдет целевой CSS. Он не нацеливается на него автоматически, просто когда я немного изменяю размер экрана ... Я играл с позицией скриптов, например, помещая новый CSS перед фактическим CSS, но это не очень хорошо.

Есть идеи? Если я не достаточно ясно, просто скажите мне:)

Answer 1

Для этого вы можете использовать Adapt.js . Adapt определяет, какой CSS-файл загружать в зависимости от ширины , и переключает CSS-файл на resize-event или запускается при наклоне планшета или телефона.

Также вы можете использовать Media Queries с polyfill для поддержки старых браузеров вместо Adapt.js.

Answer 2

Рассматривали ли вы использование медиа-запросов?

http://www.alistapart.com/articles/responsive-web-design/

Answer 3

Просто позвоните, как только окно загрузится в начале:

function checkWindowSize() {

    if ( $(window).width() < 800 ) {
        $('body').addClass('small');
    }
    else {
        $('body').removeClass('small');
    }

}
$(window).load(checkWindowSize);
$(window).resize(checkWindowSize);

Answer 4

Как уже упоминалось выше, медиазапросы - это путь к успеху. Вы смотрели HTML, как это:

<link href='style.css' type='text/css' rel='stylesheet' media='screen'>

W3C представил Mediaqueries , чтобы дополнительно указать носитель, на котором должны использоваться таблицы стилей, это позволяет обойти недостатки отслеживания браузера и делает его также работающим без JavaScript.

Answer 5

Ваш метод checkWindowSize вызывается только при изменении размера окна.При обновлении страницы изменение размера не происходит, поэтому вы никогда не проверяете размер и никогда не добавляете класс.

Поэтому вам также необходимо вызвать checkWindowSize при загрузке страницы.Добавьте это, в дополнение к коду, который у вас уже есть:

$(function() { checkWindowSize(); });