Question

我在堆栈上浏览了无数页面，但无济于事。我试图摆脱使用媒体查询的移动设备上的页脚。不幸的是，这似乎确实可以在设备上运行，但是如果您将屏幕最小化，则可以在桌面浏览器上运行。任何想法将不胜感激。

页脚位于包含声明中。

这是我的代码：

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

Answer 1

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

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

1 个答案: