Question

我正在尝试使用以下代码来改进自适应设计中的几个布局元素。它似乎不起作用，它调用第一个属性，但就是这样。这里是使用颜色测试状态。

$(document).ready(function() {
    if ((screen.width>940)) {
        // if screen size is 940px wide or larger
        $("body").css('color', '#222'); // you can also use $(".yourClass").hide();
    } else {
        // if screen size width is less than 940px
        $("body").css('color', 'red'); // here you can also use show();
    }
});

真心感谢任何帮助！

Answer 1

您可以在代码中使用$(window).width();，但我强烈建议您为此目的使用CSS3媒体查询。

body{
    color: #222;
}
@media screen and (max-width: 940px) {
    body{
        color: red;
    }
}

这是一个很好的论点：

http://www.alistapart.com/articles/responsive-web-design/

Answer 2

你是不是意味着$(window).width()？我的电脑上的screen.width总是1920。在智能手机上它应该更小，但在任何给定的设备上它应该是相当恒定的。在任何情况下，使用$(window).width()证明您的语法是正确的。

http://jsfiddle.net/VvFkK/

Answer 3

这是我要做的......或接近它的东西......如果我使用JS

$(function(){
                        // on window resize fire this 
                        $(window).resize(function(){
                            //get window width
                            var wide = $(window).width();

                            //log width
                            console.log(wide);

                            if (wide > 940) 
                                {
                                    console.log('wider');
                                }                             
                            else (wide < 940)
                                {
                                    console.log('not so wide');
                                }
                        });


            });//END Doc Ready

修改低于分辨率的CSS属性

3 个答案: