如果窗口调整大小，Twitter 引导

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. 响应大小、分辨率和像素密度的变化

例如，这个 sn-p 将为您提供对视网膜显示器的有效检测：

@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 涵盖了目前很多的显示类型。