Question

所以我把这个东西作为页脚，但是当屏幕尺寸小于740px时，我希望垂直线消失。也许是媒体统治。当我调整到移动屏幕的时候，垂直线仍然在弄乱我的设计，我需要一个代码来禁用它们的屏幕，其中widht res小于740px。

 <div id="footer1" >
<div class="container">
  <div id="big-footer1" class="row">

    <div class="desktop-4 tablet-2 mobile-3 alpha">

    </div>

    <div class="desktop-4 tablet-2 mobile-3">





    </div>       

    <div id="social-icons" class="desktop-4 tablet-2 mobile-3 omega">

    </div>


  </div>   


#big-footer1 { 
border-top: 1px solid {{ settings.footer-top-border }}; 
 margin-bottom: 20px; 
 margin-top: 20px;
  border-bottom: 1px solid {{ settings.footer-bottom-border }}; 
 padding: 30px 0 30px; 
 list-style-type: none; 
 }

 #big-footer1 .alpha { border-right: 1px solid {{ settings.dotted_color }}; }
 #big-footer1 .omega { border-left: 1px solid {{ settings.dotted_color }}; }

 #big-footer1 { color: {{ settings.footer-text-color }}; }
 #big-footer1 a { color: {{ settings.footer-text-color }}; }

 #big-footer1 h4 {
 margin-bottom: 30px;
 color: {{ settings.footer-header-color }}; 
 display: block;
 text-transform: uppercase; 
}

 #big-footer1 > div { padding: 0 20px; min-height: 120px;}


 #big-footer1 ul {
 list-style: none;
 margin: 0;
 line-height: 34px;
}

#big-footer1 ul li { display: inline-block; margin: 0 5px; }

#footer1 { background: {{ settings.footer-background }}; padding-bottom: 20px; text-      align: center; }

Answer 1

此用例可由媒体查询处理。你似乎需要max-width：

foo {
    /* Normal styles */
}

@media screen and (max-width: 740px) {
    foo {
        /* Styles for under 740px */
    }
}

见http://jsbin.com/bugay/1/。调整大小以查看其工作原理。

有关媒体查询的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

将网站调整为移动设备时禁用垂直边框

1 个答案: