如何将水平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读了，检查出来。

好运。