android - 如何使用媒体查询显示 2 个响应移动设备的菜单(1 个是图像)?
问题描述
我正在尝试启用我的网站导航以进行响应式移动查看。我有一组用 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>
解决方案
我需要在媒体查询中定位图像。我添加了并且似乎正确显示:
#nowrap li img{
display: block;
margin-top: 10px;}
推荐阅读
- c# - 如何使用 MSI 而不是 Service Principal 来调用部署在 Azure 上的 Authenticate web api
- java - Java中抛出异常的单元测试?
- r - RMarkdown:如何将大型结果打印或分解为选项卡式内容(选项卡)
- html - 将页面内容与页脚垂直对齐
- javascript - 在 javascript 中正确使用带有 Soup 的 SSL 证书
- hyperledger-fabric - Hyperledger Explorer - 未成功
- r - 如何让我的 dr4pl(drc 替代)剂量响应代码忽略它不适合的模型?
- google-cloud-vision - 如何摆脱谷歌云视觉 API 中的“无属性枚举错误”
- python - 如何计算传递给函数的参数数量?
- r - 使用 R 的 facet_wrap 功能逐年比较观察数据和模拟数据?