我如何製作動態標題自己調整大小？

我想根據用戶屏幕的大小製作調整大小的標題。到目前爲止，我在左側有一個圖像，在右側有一個菜單。我希望菜單右邊的邊距變小，直到圖像開始變小，然後如果變得更小，菜單會在圖像下方顯示。我如何製作動態標題自己調整大小？

下面是HTML代碼：

<body> 

<script type="text/javascript" src="script.js"></script> 
<script src="jquery1.js"></script> 

<div id="wrapper"> 
    <!-- Header --> 
    <div id="header"> 
     <!-- Logo --> 
     <a href="index.htm"><div id="header_logo"></div></a> 
     <!-- Navigation Bar --> 
     <ul class="navbar"> 
      <li><a href="index.htm">Home</a> 
      <li><a href="#">#</a> 
      <li><a href="#">#</a> 
      <li><a href="#">#</a> 
      <li><a href="#">#</a> 
     </ul> 
    </div>

這裏是CSS代碼：

#wrapper { 
width: 80%; 
margin-left: auto; 
margin-right: auto; 

} 

#header { 
float: left; 
width: 100%; 
height: 250px; 
border: none; 
} 

#header_logo { 
background: url("images/logo.png")no-repeat; 
float: left; 
width: 300px; 
height: 135px; 
margin: 50px 0px 0px 50px; 
} 

.navbar { 
float: right; 
margin-top: 125px; 
margin-right: 100px; 
width: 600px; 
} 

.navbar li { 
float: left; 
list-style-type: none; 
} 

.navbar li a { 
padding: 6px 20px; 
text-decoration: none; 
border-right: 1px solid #0040FF; 
color: #0040FF; 
font-size: 15px; 
font-family: 'Open Sans', sans-serif; 
font-weight: bold; 
} 

.navbar li a:hover{ 
color: #000000; 
background-color:#0040FF; 
}

謝謝你，我會感謝任何幫助。

來源

2014-01-07 The Gibbinold

查看CSS庫如何使用'Bootstrap'來做這件事，並嘗試谷歌搜索'responsive css'。 – OozeMeister

那麼我會建議要麼保持水平的東西百分比或使用CSS媒體查詢。

個例子是在這裏：

HTML：

<div id="wrapper"> 
    <!-- Header --> 
    <div id="header"> 
     <!-- Logo --> 
     <a href="index.htm" id="header_logo"><img src="images/logo.png" /></a> 
     <!-- Navigation Bar --> 
     <ul class="navbar"> 
      <li><a href="index.htm">Home</a></li> 
      <li><a href="#">#</a></li> 
      <li><a href="#">#</a></li> 
      <li><a href="#">#</a></li> 
      <li><a href="#">#</a></li> 
     </ul> 
    </div> 
</div>

CSS：

#wrapper { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#header { 
    height: 250px; 
} 

#header_logo { 
    float: left; 
    width: 20%; 
    margin: 50px 0 0 5%; 
} 
#header_logo img{width:100%;} 

.navbar { 
    float: right; 
    margin-top: 125px; 
    margin-right: 5%; 
    text-align:right; 
    width: 60%; 
} 

.navbar li { 
    display:inline-block; 
    list-style-type: none; 
} 

.navbar li a { 
    display:block; 
    padding: 6px 20px; 
    text-decoration: none; 
    border-right: 1px solid #0040FF; 
    color: #0040FF; 
    font:bold 15px 'Open Sans', sans-serif; 
} 

.navbar li a:hover{ 
    color: #000; 
    background-color:#0040FF; 
}

的jsfiddle：http://jsfiddle.net/ashishanexpert/kvg4F/

祝你好運！

來源

2014-01-07 20:00:34

感謝它不是我想要的，但它通過玩弄它給了我答案。我有種心裏在想jQuery，儘管 –

我非常歡迎 –

我如何製作動態標題自己調整大小？

回答

相關問題