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

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？

谢谢。

- Crypto Newbie

---

为什么你不使用CSS媒体查询？ - Joffrey Maheo

“top”是相应HTML元素的ID吗？还是您尝试使用“＃top”更改CSS定义（实际上这不起作用）？ - Axel Amthor

使用媒体查询而不是jQuery。 - Bongs

谢谢，我之前不知道媒体查询。它很有效 :) - Crypto Newbie

Answer 1

您可以使用 媒体查询 来更改CSS，如下所示：

CSS：

#top{
    padding-left:20%;
}

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

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

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

- Joffrey Maheo

---

请参阅以下教程页面：http://css-tricks.com/css-media-queries/ 以及维基百科https://en.wikipedia.org/wiki/Media_queries#Using_media_queries - Luke H

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/

- DifferentPseudonym

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
链接

- Hamix