基於顯示器寬度的元素大小

我正在創建我自己的個人網站，作爲我迄今在HTML和JavaScript中學到的內容的測試。我製作了工具欄，在我的顯示器上看起來不錯，寬度很大。我有工具欄的內容在中心。我試圖在一個較小的顯示器上訪問它，並且工具欄中的元素相互重疊，因爲我根據百分比設置了內容。我知道用像素進行測量會遇到同樣的問題。如何創建一個網站，如果監視器寬度大於x像素，那麼它會將工具欄的內容居中，但是如果監視器寬度小於x像素，它將不會居中工具欄的內容？基於顯示器寬度的元素大小

正如你可以在this中看到的jsFiddle，元素重疊，但如果將視圖窗格拖動得更寬，則可以看到它居中。

的index.html：

<body> 
<div id="header"> 
    <div id="toolbar"> 
     <div id="links"> 
      <ol> 
       <li id="home"><a href="justinpchang.zxq.net/index.html">Home</a></li> 
       <li id="blog"><a href="justinpchang.zxq.net/blog/index.html">Blog</a></li> 
       <li id="forum"><a href="justinpchang.zxq.net/forum/index.html">Forums</a></li> 
       <li id="chatbox"><a href="justinpchang.zxq.net/chatbox/index.html">Chatbox</a></li> 
       <li id="code"><a href="justinpchang.zxq.net/code/index.html">Code</a></li> 
       <li id="calendar"><a href="justinpchang.zxq.net/calendar/index.html">Calendar</a></li> 
      </ol> 
     </div> 
     <div id="login"> 
      Username: <input type="text" name="firstname"></input> 
      Password: <input type="text" name="lastname"></input> 
      <a href="justinpchang.zxq.net/user/loginlanding.html"><button id="submit" class="button">Submit</button></a> 
     </div> 
    </div> 
</div>

CSS：

body{ 
background-color:#EBF2F0; 
margin-top:50px; 
} 
#links{ 
padding:0px; 
margin:0px; 
top:-10px; 
position:absolute; 
vertical-align: center; 
} 
a:link{ 
text-decoration:none; 
color:#FFFF00; 
} 
a:visited{ 
text-decoration:none; 
color:#FFFF00; 
} 
a:hover{ 
text-decoration:none; 
color:#000BF2; 
} 
a:active{ 
text-decoration:none; 
color:#FFFF00; 
} 
li{ 
display:inline; 
padding:0px; 
font-family:Courier; 
} 
ol{ 
list-style-type: none; 
} 
#header{ 
width:100%; 
padding:5px 10px; 
margin:0px; 
height:25px; 
top:0px; 
left:0px; 
position:fixed; 
background-color:#000000; 
} 
#toolbar{ 
width:70%; 
margin-left:15%; 
margin-right:15%; 
} 
#home,#blog,#forum,#chatbox,#code,#calendar{ 
padding:10px; 
color:#000BF2; 
} 
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{ 
background-color:#2E2E2D; 
color:#000BF2; 
} 
#login{ 
color:#FFFFFF; 
margin-right:30px; 
text-align:right; 
} 
#submit{ 
margin-top:-7px; 
margin-left:10px; 
padding:6px; 
}

來源

2013-10-22 Justin Chang

您需要讓你的'＃頭部寬度更大，點擊/懸停時登錄下拉，或者使元素更小。 –

如果你需要一個CSS唯一的解決辦法，你可以用min-width玩：

#toolbar{ 
    width:70%; 
    margin-left:15%; 
    margin-right:15%; 
    min-width:1200px; 
}

Fiddle

來源

2013-10-22 22:40:45

基於顯示器寬度的元素大小

回答

相關問題