Question

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

网站网址：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>

好的，现在我有了CODE，我在<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 for Video。似乎DIV在我的代码中处于领先地位。

我删除了它并修复了它：）

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

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

1 个答案: