Question

我的背景图片位于此处 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;
}

如果屏幕分辨率为1024x768，则徽标位置非常正确/距离右侧导航菜单不太远。

但如果屏幕分辨率较高，例如1366x768，则徽标将远离其右侧的导航菜单。

我尝试使用一些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？

谢谢。

Answer 1

您可以像media query一样更改css：

CSS：

#top{
    padding-left:20%;
}

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

DEMO：http://jsfiddle.net/9nk4hccn/

您还可以在Luke H评论

的链接上查看有关media query的更多详细信息

Answer 2

您可以在填充上使用基于视口的单位。链接到w3.org

http://www.w3.org/TR/css3-values/#viewport-relative-lengths

#container{
height:200px;
width:400px;
background:#fff;
padding-left:20vw;/* viewport width's 20%*/
}

http://jsfiddle.net/9nk4hccn/6/

Answer 3

<强> HTML

<div id= "top">
    <div class="content">
        <div class="banner"></div>
        <div class="menu">Menu | Menu | Menu</div>
    </div>
</div>

<强> CSS

#top {
    background-color: #000 ;
    padding-bottom:10px !important;
    padding-top:10px !important;
    padding-left: 30% !important;
    position:relative;
}
.banner
{    
    background-image:url('http://www.batikdharsono.com/x_img/batik-bird.png');
    background-size: auto 100%;
    background-position:center left;
    background-repeat:no-repeat;    
    width:100px;
    height:20px;
    float:left;
}
.content{
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    position:absolute;
}
.menu{
    float:left;
    border:1px solid #aaa;
    width:200px;
    height:20px;
    color:#fff;
}

<强>的jsfiddle
Link

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

3 个答案: