2

我目前正在使用@media设置一些 CSS 样式，但现在我需要在 JQuery 中对屏幕大小进行等效检查。

@media ( min-width: 33em ) {

}

这个想法是当屏幕尺寸大于 33em 时隐藏一个按钮，并在小于 33em 时显示它。

这是按钮：

<asp:Button runat="server" ID="btnSelectAll" CssClass="btnSelectAll" data-theme="b"
                Text="Select All" OnClick="btnSelectAll_Click" />
4

5 回答 5

2

工作jsFiddle示例：http: //jsfiddle.net/A5Hk5/2/

您要做的就是在窗口调整大小事件上检查屏幕宽度，如果宽度低于某个值（如果在我的示例中为 640 像素），则将其显示设置为无，否则它是块状或可见的。

此解决方案使用 em 到 px 转换，方法可以在下面找到。取自HERE的转换函数。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){ 
    $(window).resize();
});

$(window).resize(function() {
    $(".ui-btn").css({display: window.innerWidth >= $(33).toPx() ? "block" : "none"});
});

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8);
};


$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal);
};
于 2013-07-10T08:44:19.813 回答
1

最简单的方法是使用一个库（例如Enquire.js），使您能够进行媒体查询。这使您可以像使用 CSS 一样在 JavaScript 中使用媒体查询。

当然，如果您只想在宽度低于 33em 时显示一个按钮，并在高于 33em 时隐藏它，不管@media或任何其他查询，只需测试屏幕宽度：

// convert window width from pixel to em, as em is relative to size of font
var widthEms = $(window).width() / parseFloat($('body').css('font-size'));

// test for em width
if (widthEms < 33) {
    $('#btnSelectAll').show();
} else {
    $('#btnSelectAll').hide();
}

（像素到 em 转换的功劳：是否可以使用 javascript 以 em 为单位获取窗口的宽度？）

于 2013-07-10T08:39:24.997 回答
1

jQuery 可以为您提供视口的可用宽度为$(window).innerWidth().

您还需要检查窗口大小调整$(window).resize( yourRedrawFunction )

还要注意像素/em 转换。width 属性将是像素大小，并且您已要求 em。这很难计算，所以如果可以的话，我建议避免这种复杂性。

工作示例：

function redrawButton(){
    var pxPerEm = 13, // <- have fun with this
        pxWidth = $(window).innerWidth(),
        emWidth = Math.round( pxWidth / pxPerEm );
    $('#btnSelectAll')[ width < emWidth ? 'hide' : 'show' ]();
    return true;
}
redrawButton();
$(window).resize( redrawButton );

可以通过解析 root 来计算 em 大小font-size，但是必须存在该 css 属性才能使其工作。您可能希望退回到您知道对您的网站正确的东西，例如我的示例中的 13px。

var pxPerEm = /^(\d+)px$/.exec($(document.body).css('font-size')) ? Number(RegExp.$1) : 13;
于 2013-07-10T08:39:52.897 回答
0

尝试这个：

if(screen.width > 1000)
{
 ...
}

尝试与 em 不确定它是否会起作用。

于 2013-07-10T08:39:19.757 回答
0

我建议你使用：

$(window).on('load', function () {
    var screenSize = { //you could wish to set this variable as global
        width: $(this).width(),
        height: $(this).height()
    };
});

如果您是“有意识”的开发人员并始终为图像宽度和高度属性设置并且不使用某些异步脚本来重新渲染 DOM，那么最好使用 DOM 就绪处理程序：

$(function(){...}); //use $(window) inside handler

因此，可以使用以下方法访问屏幕宽度：screenSize.width

于 2013-07-10T08:39:44.963 回答