jquery - 如果窗口大小调整，Twitter Bootstrap

Question

我正在使用 twitter bootstrap 3 我需要调整一些针对特定屏幕尺寸应该不同的用户 UI 特定值。

我需要根据屏幕分辨率设置该值，如果屏幕分辨率发生变化，我还需要更改该值。

这是我的代码

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 中做很多这样的事情。这些问题就是他们要解决的问题。查看this link on CSS Tricks这涵盖了一些基础知识。

使用媒体查询你可以实现:

1. 屏幕分辨率检测
2. 像素密度检测
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其中涵盖了目前的许多显示类型。