Twitter bootstrap, если размер окна

Question

Я использую twitter bootstrap 3 Мне нужно настроить некоторые пользовательские пользовательские интерфейсы, которые должны отличаться для конкретного размера экрана.

Мне нужно установить эти значения на основе разрешения экрана, а также изменить эти значения, если изменение разрешения экрана изменится.

Так вот мой код

function SetOffsets() 
{ 
    var navbarOffet = 80; 
    var pageMenuNavOffset = 350; 

    if ($(window).width() <= 768) { 
     navbarOffet = 80; 
     pageMenuNavOffset = 350; 
    } 
    else if ($(window).width() > 768) { 
     navbarOffet = 600; 
     pageMenuNavOffset = 100; 
    } 

    $('.mainHeader').affix({ 
     offset: { 
      top: navbarOffet 
     } 
    }); 

    $('.mainNav').onePageNav({ 
    currentClass: 'active', 
     scrollOffset: pageMenuNavOffset 
    }); 
} 

Для достижения своей цели я называю эту функцию в документе ready и на окне resize Но по какой-то причине $('.mainHeader').affix и $('.mainNav').onePageNav не получает переопределена с новыми значениями. В результате .affix и .onePageNav просто получают вызовы с начальными значениями (значения документа ready).

$(window).resize(function() { 
     SetOffsets(); 
    }); 

$(document).ready(function() { 
     SetOffsets(); 
    }); 

Так что, если я загрузить страницу с исходным разрешением <=768 из >768 - все работает нормально. Но при изменении разрешения новые значения не применяются в .affix и .onePageNav звонках. Я ясно вижу на отладчике, что navbarOffet и pageMenuNavOffset изменились при изменении размера экрана.

Как это исправить?

Answer 1

Честно говоря, я не уверен, что подхожу к этому, используя JavaScript. Вы можете многое сделать в CSS с помощью Media Queries. Эти проблемы - это то, что они решили решить. Отъезд this link on CSS Tricks, который охватывает некоторые основы.

С медиа запросов вы можете получить:

1. обнаружение Разрешение экрана
2. Pixel обнаружения плотности
3. обнаружения Ориентация
4. Ответить на изменения в размере, разрешение и плотность пикселей

Например, этот фрагмент даст вам достоверное обнаружение для дисплеев сетчатки:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
} 

Вот несколько других правил CSS, а также для обнаружения:

/* 1.25 dpr */ 
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
    /* Retina-specific stuff here */ 
} 

/* 1.3 dpr */ 
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */ 
} 

/* 1.5 dpr */ 
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
    /* Retina-specific stuff here */ 
} 

CSS Tricks has a list of these that you can take a look at, который охватывает много типов дисплеев там в настоящее время.