移动设备页脚媒体查询不起作用答案

【问题标题】：Mobile Device Footer Media Query Not Working移动设备页脚媒体查询不起作用
【发布时间】：2019-02-15 07:19:23
【问题描述】：

我浏览了 Stack 上的无数页面，但无济于事。我正在尝试使用媒体查询摆脱移动设备上的页脚。不幸的是，这似乎在设备上工作，但是如果你最小化屏幕，它在桌面浏览器中工作。任何想法将不胜感激。

页脚位于包含语句中。

这是我的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
    <div class="container-fluid">
        <div class=row>
    <div class="col-lg-4">
      <h2 class="footerheading"> Officers</h2>
      <div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">

        <table width="549" height="46" class="footertext">
  <tbody>
    <tr>
      <td class="footerposition">{{col_position}}</td>
      <td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
      <td class="footerphone">{{col_phone}}</td>
        <td> <a href="mailto:{{col_email}}" class="footeremail">{{col_email}}</a> </td>
    </tr>
  </tbody>
</table>
      </div>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Navigate</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Stay in Contact!</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    </div>
  </div>
    </div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
       jQuery.dmxServerAction(
         {"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
       );
  /* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>

这是我的 CSS：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@charset "UTF-8";

.navbar-nav> li > a {
  font-family: 'Arial';
  font-weight: bold;
  color: #000000;
  font-size: 13px;  
}

.dropdown-menu > li > a {
    font-family: 'Arial';
  font-weight: bold;
    color: #000000;
    font-size: 13px;    
}

.navbar-default { 
  border-color: #000000; 
}

.nav.navbar-nav a:hover {
  color: #206E38;
}

.dropdown-menu .dropdown .dropdown-toggle a {
    font-family: 'Arial';
    font-weight: bold;
    font-size: 12px;
}

.banner {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


.ptobigtitle {
    font-family:'Anton', sans-serif;
    padding: 10px;

}

.ptosubtitle {
    font-family: 'Anton', sans-serif;
    padding-left: 10px;
    font-size: 30px;
    color: #535252;
}

.navbar-btn {
    float: right;

}

.btn-default {
    background-color: #206E38;
    color:#FFF;
}
.jumbotronimg {
    float: right;
}

.learnmorebtn {
    margin-left: 350px;
}

.articleheadline{
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    background: #A1C2AB;
    color: #000;
    letter-spacing: 2px;
    padding: 5px;
    max-width: 400px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
}

.info{

    text-align: center;
    top: 37px;
}

.rightinfo{

    text-align: center;
}


.footer {
    display: none;
}
@media (min-width: 767px) {
        .footer { 

    display:block;
    background:#CDCDCD;
    overflow:hidden;
    margin-bottom: 0;
    postion: fixed;
    height: auto;
    bottom: 0;
    width: 100%;
    clear: both;

        }
}


.bottomfooter {
    color:#FFF;
    font-family: 'Arial';
    font-size: 10px;
    background: #CDCDCD;
    bottom: 0;
}

.mailsignup{
    background: #CDCDCD;
    font-family: 'Arial';
        font-size: 8px;
}

.footerheading {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    text-align: center;
    text-decoration: underline;
    padding-left: 30px;

}

.form-inline{
    background: #CDCDCD;
}

#mc_embed_signup .button {
    font-family: "Arial";
    font-size: 13px;
    background-color: #206E38;
    padding: 5px;
    padding-top: 2px;
    text-align: center;
}


.callistcontainer {
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 300px;
    overflow: scroll;
}

.footertext{
    font-size: 10px;
    padding-left:10px;
    table-layout: fixed;
    width: 96%;
    height: auto;
    text-align: left;

}
.footerposition{
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    border-right: solid;
    border-width: 1px
}

.footername{

    border-width: 1px;
    text-align: center;
}

.footerphone{

    border-width: 1px;
    text-align: center
}

.footeremail {
    padding-left: 10px;

    border-width: 1px;
    text-align: center
}

【问题讨论】：

这篇文章可能对你有所帮助：stackoverflow.com/questions/17344339/…
另外，你应该从你的 CSS 中去掉 viewport 标签。
移除了视口。不知道那是怎么到那里的。还是行不通。 :(

标签： php css media-queries

【解决方案1】：

如果您将@media 查询放在 html 中，它将起作用。没有任何意义，但它有效。

【讨论】：