媒体查询无法在我的HTML代码中使用，不确定在这里我做错了什么

Question

这是我的网站快速点击代码。

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

Answer 1

我解决了这个问题，当时有JS脚本正在为视频添加Div。 似乎DIV在我的代码上是最重要的。

我删除了它并修复了它:)

链接到该网站： http : //www.vegastoothdr.com/

媒体查询无法在我的HTML代码中使用，不确定在这里我做错了什么

问题描述

1 个解决方案

解决方案1
0 2016-03-23 07:21:18

媒体查询无法在我的HTML代码中使用，不确定在这里我做错了什么

问题描述

1 个解决方案

解决方案1 0 2016-03-23 07:21:18

解决方案1
0 2016-03-23 07:21:18