如何使用媒体查询显示 2 个响应移动设备的菜单（1 个是图像）？答案

【问题标题】：How can I display 2 menus (1 is images) responsive for mobile using media queries?如何使用媒体查询显示 2 个响应移动设备的菜单（1 个是图像）？
【发布时间】：2018-12-09 14:25:24
【问题描述】：

我正在尝试启用我的网站导航以进行响应式移动查看。我有一组用 CSS 制作的按钮，然后是一组图像 (.png) 按钮。当我使用 Firefox 并缩小屏幕宽度时，我得到了正确的行为，但由于某种原因，该网站在我的手机上显示错误的布局。有人可以告诉我如何在移动设备上显示该网站吗？我已将其包含在我的 html 中：meta name="viewport" content="width=device-width, initial-scale=1.0"。

网站在这里： http://www.mattmacy.com/InternshipPortfolio/imagesTHREE/

这是该网站在桌面上的图片：

以下是 Firefox 中按比例缩小的页面的 2 个屏幕截图：

这是我手机中显示错误布局的图像的屏幕截图：

我使用媒体查询来更改在移动设备上显示时的布局。请注意，CSS 按钮在最初访问时正确显示。与#nowrap 项目（那些是标签图像）有关的东西一定会导致页面水平扩展。这是我尽可能多的 CSS：

  #nowrap{
  white-space: nowrap;
  position: relative;
  top: 130px;
  }

  #nowrap, li {
  list-style: none;
  display: inline;
  }

  #A{
  position: relative;
  right: 0%;
  }

  #B{
  position: relative;
  right: -3%;
  }

  #C {
  position:relative;
  right: -6%;
   }

  #D{
  position: relative;
  right: -9%;
  }

  #whiteFile{
  height: 80px;
  width: 100%;
  background-color: white;
  border:4px solid #000;
  position: relative;
  top: 100px;

   }



 #item{
 position: relative;
 top: 160px;
  }

 @media only screen and (max-width: 800px) {
 #navbar li {display: block;
 vertical-align: middle;}
 #logo {position: relative;
  top: -1100px;
  }

 #nowrap, li{
 display: block;
 whitespace: normal;
 vertical-align: middle;
 }
 #navbar li a {display: block;
        margin-top: 10px;}

 #A, #B, #C, #D
 {display: block;
 vertical-align: middle;
 margin-top: 20px;
 position: relative;
 top: 500px;
    right: 0;}

这是我的 CSS 菜单的 HTML，接下来是我的标签式菜单：

 <div id = "navbar">
 <ul>
 <li><a href= "index.html">Home</a></li>
 <li><a href= "Artwork.html">Artwork</a></li>
 <li><a href= "Writings.html">Writings</a></li>
 <li><a href= "CV.html">CV</a></li>
 </ul>

 <div id="logo"><a href="index.html"><img class="graphic" 
 src="ESOTERICSTUDIES.jpg" height="85" width="900"></a></div>
 </div>

 <body>
 <ul id="nowrap">
 <li><img id="A" src="GRAPHICSw.png" height="95" width="290"></li>
 <li><a href="VIDEOS.html#item"><img id="B" src="VIDEOSb.png" 
 height="95" width="290"></a></li>
 <li><a href="PHOTOS.html#item"><img id="C" src="PHOTOSb.png" 
 height="95" width="290"></a></li>
 <li><a href="WEBSITES.html#item"><img id="D" src="WEBSITESb.png" 
 height="95" width="290"></a></li>
 </ul>
 <div id="whiteFile"></div>
 <h1 id="item">GRAPHICS</h1>
 </body>

【问题讨论】：

请添加此问题涉及的代码，以便人们更好地理解您的问题并找到潜在的解决方案。

标签： android html css

【解决方案1】：

我需要在媒体查询中定位图像。我添加了并且似乎正确显示：

 #nowrap li img{
 display: block;
 margin-top: 10px;}

【讨论】：