使我的導航響應

Question

我想使導航響應不斷變化的屏幕大小。所以，當屏幕最小化爲600或800像素時，我希望導航移動到屏幕的頂部，並可能被下降的小菜單圖像取代。

我在這裏是一個完整的初學者，這也是我在stackoverflow上的第一篇文章，所以我仍然在學習如何編寫代碼，並且非常感謝一些建議。

謝謝！

body{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t background-color: #f6be21; 
 
\t margin-right: 20px; 
 
} 
 

 
/* reset margin on all elements */ 
 

 
* { 
 
\t margin: 0; 
 

 
} 
 

 
.blurb{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 20px; 
 
\t text-align: left; 
 
\t width: 45%; 
 
\t color: #ffffff; 
 
\t list-style: none; 
 
\t float: left; 
 
\t margin-left: 60px; 
 
\t margin-top: 60px; 
 
\t position: absolute; 
 
\t padding-bottom: 100px; 
 
} 
 

 

 
.big-number-1{ 
 
\t font-size: 70px; 
 
\t text-align: right; 
 
\t clear: both; 
 
} 
 

 
#main-header { 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t float: right; 
 
\t position: fixed; 
 
\t bottom: 275px; 
 
\t height: 20px; 
 
\t right: 50px; 
 
\t clear: both; 
 
} 
 

 
.nav li + li:before{ 
 
\t content: "/"; 
 
\t padding: 0 9px; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav > li { 
 
\t display: inline; 
 
\t list-style: none; 
 
\t text-decoration: none; 
 

 
} 
 

 
ul.nav{ 
 
\t list-style: none; 
 
\t display: inline; 
 
} 
 

 
h1.title{ 
 
\t font-size: 53.34px; 
 
\t color: #000000; 
 
} 
 

 
a.h1{ 
 
\t text-decoration: none; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color: #000000; 
 
} 
 

 
a:visited{ 
 
\t color: #000000; 
 
}

<header id="main-header"> 
 
     <h1 class="title"><a href="index.php">Chris Ioannou</a></h1> 
 

 
     <ul class="nav"> 
 

 
      <li> 
 
       <a>.01 about</a> 
 
      </li> 
 
      
 
      <li> 
 
       <a href="read.html">.02 read</a> 
 
      </li> 
 
     </ul> 
 
     
 
     <div class="big-number-1"> 
 
\t \t \t <h3>.01<h3> 
 
\t \t \t \t 
 
    </header>

Answer 1

有一個類.blurb我已刪除，我找不到那html tags。 Second有framework通過它可以使你的工作responsive或使用media query to style at different break points因爲我在這裏用你的代碼一定width後改變background-color和位置內容top，如下，

@media screen and (max-width: 640px){ 
body{ 
    background:red; 
} 
#main-header{ 
    top:0; 
    } 
} 

body{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t background-color: #f6be21; 
 
} 
 

 
/* reset margin on all elements */ 
 

 
* { 
 
\t margin: 0; 
 

 
} 
 

 

 
.big-number-1{ 
 
\t font-size: 70px; 
 
\t text-align: right; 
 
} 
 

 
#main-header { 
 
\t text-align: right; 
 
\t width: 100%; 
 
\t float: right; 
 
\t position: fixed; 
 
\t bottom: 275px; 
 
\t height: 20px; 
 
\t right: 50px; 
 
\t clear: both; 
 
} 
 

 
.nav li + li:before{ 
 
\t content: "/"; 
 
\t padding: 0 9px; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav > li { 
 
\t display: inline; 
 
\t list-style: none; 
 
\t text-decoration: none; 
 
} 
 

 
ul.nav{ 
 
\t list-style: none; 
 
\t display: inline; 
 
} 
 

 
h1.title{ 
 
\t font-size: 53.34px; 
 
\t color: #000000; 
 
} 
 

 
a.h1{ 
 
\t text-decoration: none; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color: #000000; 
 
} 
 

 
a:visited{ 
 
\t color: #000000; 
 
} 
 

 
@media screen and (max-width: 640px){ 
 
    body{ 
 
    background:red; 
 
} 
 
#main-header{ 
 
    top:0; 
 
    } 
 
}

<header id="main-header"> 
 
     <h1 class="title"><a href="index.php">Chris Ioannou</a></h1> 
 

 
     <ul class="nav"> 
 

 
      <li> 
 
       <a>.01 about</a> 
 
      </li> 
 
      
 
      <li> 
 
       <a href="read.html">.02 read</a> 
 
      </li> 
 
     </ul> 
 
     
 
     <div class="big-number-1"> 
 
\t \t \t <h3>.01<h3> 
 
\t \t \t \t 
 
    </header>

Answer 2

下面是一個例子：..這將頭移動到屏幕的頂部上更小的裝置。您可以在開發人員工具欄上的谷歌瀏覽器中查看。

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 480px) { 
    #main-header { 
    top: 0px !important; 
    } 
} 

Answer 3

有很多，你可以實現這一點的方式，但我強烈建議你潛入HTML，CSS和JS 框架的精彩世界。我建議從引導框架（http://getbootstrap.com/）開始。它很容易使用，並配有方便的組件。

例如，導航欄組件，通過它可以做你想做的事情菜單在不同的屏幕尺寸：

http://getbootstrap.com/components/#navbar

希望它能幫助！