这是我在网站上快速点击的代码。
网站网址:www.vegastoothdr.com/wp_site/
<body>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/@36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
<header>
<!-- Nav CODE -->
</header>
好的，现在我有了代码，我在 <head> 的最后一行放置了一个 CSS 代码节
@media screen and (max-width: 782px)
{
div#wpadminbar
{
height: 55px;
min-width: 300px;
}
}
好的...现在可以在移动设备上使用了。
但是，链接不起作用。所以我不能点击图标。所有链接均无效。
测试二:
我把它放在标题部分下，链接有效。但是媒体查询不起作用。太奇怪了。
我已将代码放在链接正常但媒体查询不工作的地方。
<body>
<header>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/@36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
最佳答案
关于css - 媒体查询在我的 HTML 代码中不起作用，不确定我在这里做错了什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36079520/