根據屏幕分辨率更改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填充左邊

回答

相關問題