1. 首頁
  2. 問答
  3. 如何在重新調整屏幕時停止移動元素？

如何在重新調整屏幕時停止移動元素？

2014-08-27 117 views
0

即時通訊相當新的Html，CSS和IM目前正在做一個非常業餘的網站，我碰到的問題是每當我嘗試從全屏窗口縮小到非常小，一切都開始移動，即使我的導航欄變成垂直的某個點，它感覺有些部分沒有「鎖定」到位讓我們說這樣生病給你一個鏈接到我的網站，所以你可以看到自己也Html和CSS代碼如下，任何想法如何解決這個問題？我已經嘗試過搜索並添加以下代碼，但沒有任何更迭.. http://dwaight.magix.net/public/# 在此先感謝..如何在重新調整屏幕時停止移動元素？

HTML代碼 

<body> 
<div class="container"> 
<div class="header"> 
    <h1 style="margin-top:0;">KYOTO INDUNSTIRES</h1></div> 
<ul div class="nav"> 
    <ul style="list-style: none; "> 
    <li><a href="#">Kyoto</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Contact us</a></li> 
    </ul> 
    </div> 

<div class="content">Hier komt de inhoud van de pagina. </div> 
<div class="footer">Hier plaats je de footer. </div> 
</div> 
</body>

CSS代碼

.header h1 { 
    text-align: center; 
    font-family: "GatsbyFLF"; 
    font-size: 150px; 

} 
.nav { 
    font-size: 250%; 
    width: 100%; 
    float: left; 
    margin: 0 0 3em 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; } 
.nav li { 
    float: left; } 
.nav li a { 
    font-family: "GatsbyFLF"; 
    display: inline-block; 
    padding: 15px 100px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #000000; 
    border-right: 1px solid #ccc; } 

.nav li a:hover { 
    color: #000000; 
    background-color: #fff; }

來源

2014-08-27 DwaightSkiiHD

回答

0

在你的容器div你應該把最小寬度。這樣你的網站將會降低，直到達到最小寬度限制。

.container{ 
    min-width:1000px; 
}

希望它有幫助！

加上一個額外的：字體大小，你或許應該考慮避免百分比，並使用「EM」在必要的時候（1EM = 14px的）

來源

2014-08-27 23:47:40

+0

'1em'是'1em'，而不是'14px'。這是一個相對大小。除非你定義它，否則你永遠無法說出這個尺寸是多少。 – Brad 2014-08-27 23:50:29

+0

是真的，但對於與像素大小的關係，大約是14px – 2014-08-28 00:08:59

+0

不，它不是！它與像素無關。如果您指的是默認大小，則完全取決於瀏覽器和設備。 – Brad 2014-08-28 00:09:56

0

可以寬度添加到容器

.container{width: 1200px;}

來源

2014-08-27 23:47:51

0

你需要給<nav>最小寬度：

nav{ 
min-width:1200px; 
}

See this fiddle
你的聖因爲如果窗口足夠大，元素只保持水平，但隨着它變得越來越小，它們就會按照它們應有的流動。

來源

2014-08-27 23:48:21

0

打開你的開發工具，並找到事情開始出錯之前屏幕的最大寬度（我認爲這是約1100像素爲您的網頁）。然後在你的CSS代碼添加：

html { 
    min-width: 400px; 
}

這將意味着，如果窗口寬度小於400個像素（更改爲實際值之上制定了），那麼該頁面將只停留在400個像素，並使用水平滾動條。

雖然這會起作用，但它通常不被認爲是最佳實踐。查看http://css-tricks.com/css-media-queries/以獲得更好的解決方案。

來源

2014-08-27 23:48:24 Zak

1

這裏發生的事情是內容簡單流暢。

你的元素重新定位自己是件好事。這使您的內容無論分辨率如何都可以看到。訣竅是讓您的內容以受控的方式重新定位。

一個快速和骯髒的方法是簡單地設置您的網站的外部容器的最小寬度。這可以用CSS來實現：

min-width: 60em;

真的不過，如果你這樣做，用戶將不得不滾動一邊到另一邊，看你的內容。通常最好讓流程自行解決。如果你想額外控制，你可以看看CSS media queries，它允許你爲不同的分辨率和條件設置不同的CSS屬性。

來源

2014-08-27 23:49:51 Brad

相關問題

 相關問題