Question

我正在尝试重新创建此类别菜单的编码：https://menu.thewhitebtq.com/collections/canapes

[！[在此处输入图像说明] [1]] [1]

响应迅速。它在移动时变成垂直1线。我需要知道html和css。

这是我目前的HTML代码：

&nbsp;
<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 查询以在移动和桌面窗口上调整您的图片。

＆＃13;

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

＆＃13;

<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>

＆＃13;

（在上面的示例中，如果您点击展开代码段，您可以在桌面视图和此代码段上看到该视图您可以看到移动窗口效果。）

响应两行菜单

1 个答案: