Question

我目前正在创建一个有媒体查询的网站。我已经有一个正常的导航，但是当网页大小减小到移动尺寸时，我希望导航切换到我创建的另一个导航栏，其中包含使移动用户更容易的图标

 @media only screen and (min-width : 50px) {
  <div class = "navbar">
  <a href="Home.html"><img src="Images/houseicon.png"/></a>
  <a href="Education.html"><img src="Images/educationicon.png"/></a>
  <a href="Contact%20Information.html"><img s**strong text**rc="Images/contactmeicon.png"/></a>
    </div>}

Answer 1

您无需向媒体查询添加html ... Html是html页面的一部分您只需要在css文件或标记中使用媒体查询设置下面的css。

@media only screen and (max-width : 767px) { .navbar a img{ width:50px !important; height:50px !important;}}

Answer 2

使用以下代码在响应式移动视图中正确显示导航。

代码::

`@media only screen and（min-width：320px）and（max-width：480px）{

.nav img {
身高：100px;
宽度：100px;
}

}`

注意::身高：100px;和宽度：100px;
100px，仅供参考，请根据实际图像尺寸更新高度和宽度。

媒体查询：导航栏上的图标

2 个答案: