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

Question

所以我将这个东西作为页脚，但我希望当屏幕尺寸小于 740 像素时垂直线消失。也许媒体统治。当我调整到移动屏幕时，垂直线仍然存在，打乱了我的设计，我需要一个代码来为宽度小于 740 像素的屏幕禁用它们。

 <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/ .调整大小以查看其工作原理。

更多关于媒体查询的信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries