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

我在这里有一个背景图像 batikdharsono（dot）com。你可以看到左上角的图片是用这个CSS代码定义的。根据屏幕分辨率更改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？

谢谢。

来源

2014-09-01 Xrvel

为什么你不使用CSS媒体查询？ – 2014-09-01 17:33:34

'顶部'是根据HTML元素的ID吗？或者你是否尝试用'＃top'改变css定义（这实际上不会工作） – 2014-09-01 17:36:30

使用媒体查询而不是jQuery。 – Bongs 2014-09-01 17:38:41

你可以改变CSS与media query这样的：

CSS：

#top{ 
    padding-left:20%; 
} 

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

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

您还可以看到卢克H的链接关于media query更多细节评论

来源

2014-09-01 17:39:12

另请参阅本教程页面：http://css-tricks.com/css-media-queries/ 和维基百科https://en.wikipedia.org/wiki/Media_queries#Using_media_queries – 2014-09-01 17:39:31

这是无价的 – maxivis 2015-04-10 17:08:44

您可以使用基于视口的单位在你的填充。链接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/

来源

2014-09-01 17:50:44 MindlessRanger

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

来源

2014-09-01 18:05:55 Hamix

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

回答

相关问题