修改分辨率下面的CSS属性

Modify CSS property below resolution

本文关键字：CSS 属性 分辨率 修改      更新时间：2023-09-26

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

$(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();
    }
});

任何帮助都是真诚的感谢!

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

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

这里有一篇关于它的好文章:

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

你指的是$(window).width()吗?屏幕上。在我的电脑上，宽度总是为1920。在智能手机上，它应该更小，但在任何给定的设备上，它应该是相当恒定的。在任何情况下使用$(window).width()证明你的语法是正确的。

http://jsfiddle.net/VvFkK/

我会这样做…或者类似的东西……如果我使用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
相关文章：