如何將水平ul轉換爲垂直的電話與CSS？

Question

我有一個菜單用ul，我做了水平。每個li頂部有一個圖標，底部有一個文本。

.menu{ 
 
     width:800px; margin:0 auto; 
 
    } 
 
    .menu li{ 
 
     display: inline; 
 
     list-style: none; 
 
     float: left; 
 
     margin-right: 1.9em; 
 
     padding: 0; 
 
     text-align:center; 
 
    } 
 
    .menu .fa { 
 
     display: block; 
 
     margin-bottom: 2px; 
 
    } 
 
    .selected { 
 
     color: red; 
 
    } 
 
    .menu li:hover{ 
 
     color: red; 
 
    }

<ul class="menu"> 
 
    <li><i class="fa fa-info-circle fa-5x selected" aria-hidden="true"></i><span>Venue Information</span></li> 
 
    <li><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i><span>Media</span></li> 
 
    <li><i class="fa fa-link fa-5x" aria-hidden="true"></i><span>Social Links</span></li> 
 
    <li><i class="fa fa-tags fa-5x" aria-hidden="true"></i><span>Tags</span></li> 
 
    <li><i class="fa fa-music fa-5x" aria-hidden="true"></i><span>Events</span></li> 
 
    <li><i class="fa fa-glass fa-5x" aria-hidden="true"></i><span>Bottle Service</span></li> 
 
    <li><i class="fa fa-cutlery fa-5x" aria-hidden="true"></i><span>Menus</span></li> 
 
</ul>

在筆記本電腦上似乎很大喜歡這幅畫

但在手機上

我怎麼能轉換這個菜單垂直在手機上如此它會反應？

注：我知道如何使用媒體查詢，我的問題是如何轉換菜單代碼垂直

Answer 1

你必須開始使用媒體查詢。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.menu li{ 
    display: block; 
} 

@media (min-width:768px){ 

    .menu li{ 
     display: inline; 
    } 

} 

Answer 2

您可以通過@media查詢應用相同的樣式：

• 注意你將不得不調整一些值，以在移動優化視圖，例如.menu的width到低於414px或任何@media斷點，這種方式內容不會溢出。
• 您可能還想在查詢中將.fa-5x設置爲display: none;，並考慮移動視口使用較小的尺寸。

這只是一個普通的例子：

@media (max-width: 414px) { 
    .menu { 
     width: 414px; 
     margin: 0 auto; 
    } 
    .menu li { 
     display: inline; 
     list-style: none; 
     float: left; 
     margin-right: 1.9em; 
     padding: 0; 
     text-align: center; 
    } 
    .menu .fa { 
     display: block; 
     margin-bottom: 2px; 
    } 
    .selected { 
     color: red; 
    } 
    .menu li:hover { 
     color: red; 
    } 
} 

Answer 3

嘗試增加這對你的CSS代碼結尾：

@media only screen and (max-width : 768px) { 
    .menu li{ 
    display: block; 
    } 
} 

和測試一個小屏幕（手機）上。這絕不是一個完整的答案，它只是CSS中媒體查詢的快速演示。所以一定要對他們（我最喜歡的媒體查詢教程是W3Schools讀了，檢查出來。

好運。