当网站调整为移动时禁用垂直边框

Question

所以我把这个东西作为页脚，但是我希望当屏幕小于740 as时，垂直线会消失。也许是媒体规则。当我调整到移动屏幕的大小时，垂直线仍然存在，干扰了我的设计，我需要一个代码来禁用它们用于小于740 to的屏幕。

 <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

媒体查询可以处理此用例。你的似乎需要最大宽度：

foo {
    /* Normal styles */
}

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

见http://jsbin.com/bugay/1/。调整大小，看看它是如何工作的。

有关媒体查询的更多信息，请参见：queries