響應兩線菜單

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>

（在上面的例子中，如果你點擊擴大片斷你可以看到桌面視圖，並在此片斷可以看到移動窗口效果圖）。