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，其中包含一些基础知识。

使用媒体查询，您可以实现：

屏幕分辨率检测
像素密度检测
方向检测
响应尺寸，分辨率和像素密度的变化

例如，此代码段将为您提供视网膜显示的有效检测：

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

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

1 个答案: