响应两线菜单

Question

我试图重新为这一类菜单编码：https://menu.thewhitebtq.com/collections/canapes

[！[在这里输入的形象描述] [1] [1]

这是响应。在移动时它将变成垂直1线。我需要知道这个HTML和CSS。

这是我目前的HTML代码：

  
<div id="navigation"> 
<ul> 
    <li><a href="http://goalexpo.com/canapes/">CANAPÉS</a></li> 
    <li><a href="http://goalexpo.com/sandwicheswraps/">SANDWICHES &amp; WRAPS</a></li> 
    <li><a href="http://goalexpo.com/fingerfood/">FINGER FOOD</a></li> 
    <li><a href="http://goalexpo.com/mini-food-cups/">MINI CUPS</a></li> 
</ul> 
</div> 
<!-- navigation --> 
<div id="navigation"> 
<ul> 
    <li><a href="http://goalexpo.com/mini-salads/">MINI SALADS</a></li> 
    <li><a href="http://goalexpo.com/desserts/">DESSERTS</a></li> 
    <li><a href="http://goalexpo.com/cakes-towers/">CAKES &amp; TOWERS</a></li> 
    <li><a href="http://goenter code herealexpo.com/hot-cold-beverages/">HOT &amp; COLD BEVERAGES</a></li> 
</ul> 
</div> 
<!-- navigation --> 

Answer 1

添加@media查询到在移动和桌面窗口调整您的影像。

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
img{ 
 
    width:30%; 
 
    height:20%; 
 
    } 
 
@media screen and (max-width:768px){ 
 
    img{ 
 
    width:80%; 
 
    height:20%; 
 
    } 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/iZCHl.jpg"> 
 
    <img src="https://i.stack.imgur.com/ufSnP.jpg"> 
 
    <img src="https://i.stack.imgur.com/TgKyr.jpg"> 
 
</div>

（在上面的例子中，如果你点击扩大片断你可以看到桌面视图，并在此片断可以看到移动窗口效果图）。