jquery – 根据屏幕分辨率更改CSS填充

我在这里找到了背景图片
batikdharsono(dot)com.
您可以看到左上角图像是使用此CSS代码定义的.

#top {
background-color: #000 !important;
padding-bottom:10px !important;
padding-top:10px !important;
padding-left: 30% !important;

background-image:url('http://www.batikdharsono.com/x_img/batik-bird.png');
background-size: auto 100%;
background-position:center left;
background-repeat:no-repeat;
}

如果屏幕分辨率为1024×768,则徽标位置非常正确/距离其右侧的导航菜单不太远.

但如果屏幕分辨率较高,如1366×768,则徽标将远离其右侧的导航菜单.

我试过使用一些jquery代码,比如

<script type="text/javascript">
jQuery(document).ready(function() {
    if (window.innerWidth) {
        if (window.innerWidth < 1100) {
              jQuery('#top').css('padding-left','30% !important');
        } else {
              jQuery('#top').css('padding-left','20% !important');
        }
     }
});
</script>

但它不起作用.我的jquery代码有什么问题吗？或者我可以改变CSS？

谢谢.

解决方法

你可以用这样的媒体查询来改变css：

CSS：

#top{
    padding-left:20%;
}

@media screen and (max-width: 1100px){
    #top{
        padding-left:50%;
    }
}

演示：http://jsfiddle.net/9nk4hccn/

您还可以在Luke H评论的链接上查看有关媒体查询的更多详细信息