Css 具有引导功能的响应式布局，.可视电话不工作

当用户正在使用phone，但使用.visible phone或visible desktop等类时，尝试隐藏两个横幅不起作用

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

然后我搜索了一下，想也许通过添加.less和less.js可以解决这个问题，但都失败了

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

HTML代码：

<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"  />
<link type="text/css" rel="stylesheet" href="/css/site.css"  />
<link type='text/css' href='/js/jquery.simplemodal.css' rel='stylesheet' media='screen' />
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="css/less/responsive.less"> 

<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/js/site.js" ></script>
<script type='text/javascript' src='/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/js/less.min.js'></script>  

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

。。。在手机上查看时，我需要隐藏横幅：

<div class="hidden-phone">

    <div id="banner0" class="hidden-phone">            
        <div class="container-fluid">
             <div id="index_slider"> 
                <div class="banner-product">   
                   <div class="mask">
                        <div class="banner-text">

                           <h1>...</h1>
                           <br>
                           <h5>...</h5>


                              <div class="banner-button">
                              <strong><a href="/download.html" class="btn btn-success btn-large" style="color:white">...</a>
                              </strong>
                              </div> 
                        </div>
                    </div>
                </div>
            </div> 
       </div> 
    </div>



    <div id="banner1" class="hidden-phone">            
        <div class="container-fluid">
             <div id="index_slider"> 
                <div class="banner-product">   
                   <div class="uploadmask">
                    <div class="banner-text">

                       <h1>...<br>
                        </h1>
                       <br>
                       <h5>...</h5>


                          <div class="banner-button">
                          <strong><a href="/submit.html" class="btn btn-primary btn-large" style="color:white">...</a>
                          </strong>
                          </div> 
                </div>
           </div>
        </div>
     </div>
   </div>
</div> 

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

...


...


…



...

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

。。。我只需要在桌面上显示视频：

<div class="visible-desktop">

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

横幅上有脚本绑定，这是问题吗

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

<script type="text/javascript">
function bindMouse(){   
    var _o1=document.getElementById("online");
    var _o2=document.getElementById("banner1");
    var _o3=document.getElementById("desktop");
    var _o4=document.getElementById("banner0");
      _o1.onmousemove=function(){
         _o2.style.display="block"; 
         _o4.style.display="none";
      }; 
      _o3.onmousemove=function(){
         _o4.style.display="block"; 
         _o2.style.display="none";
      }
}
bindMouse();

$(document).ready(function(){
    loadImage("/images/Backbanner.jpg",function(img){$("#banner0").css("background","#b9c0d0 url(" + img.src + ") top center no-repeat");});
    loadImage("/images/banner-another.jpg",function(img){$("#banner1").css("background","#000000 url(" + img.src + ") top center no-repeat");});
})



function loadImage(url, callback) {     
    var img = new Image(); 
    img.src = url;     

$(img).load(function(){
     if (this.complete||this.readyState=="complete") {
        callback(img);     
        return;   
     }
   })   
}

</script>

函数bindMouse（）{
var_o1=document.getElementById（“在线”）；
var_o2=document.getElementById（“banner1”）；
var_o3=document.getElementById（“桌面”）；
var_o4=document.getElementById（“banner0”）；
_o1.onmousemove=函数（）{
_o2.style.display=“block”；
_o4.style.display=“无”；
}; 
_o3.onmousemove=函数（）{
_o4.style.display=“block”；
_o2.style.display=“无”；
}
}
bindMouse（）；
$（文档）.ready（函数（）{
loadImage（“/images/Backbanner.jpg”，函数（img）{$（“#banner0”）.css（“背景”，“#b9c0d0url（“+img.src+”）顶部中间不重复”）；}）；
loadImage（“/images/banner-other.jpg”，function（img）{$（“#banner1”）.css（“背景”，“#000000url（“+img.src+”）顶部中间不重复”）；
})
函数loadImage（url，回调）{
var img=新图像（）；
img.src=url；
$（img）.加载（函数（）{
if（this.complete | | this.readyState==“complete”）{
回拨（img）；
返回；
}
})   
}

当他打电话时，您是否尝试将display属性设置为none

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

在css中，您可以

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

/* Phone */
@media only screen and (max-width: 760px) {
  .hidden-phone{
   display: none;
   }
}

---

只要适应你的课程，它就足以满足你的要求，我认为

不起作用了。。。我认为像.hidden phone和visible desktop这样的类基本上都是有功能的…哦，当手动定义类时，它是有效的。我使用的是风景，所以它显示的是横幅，但切换到肖像，横幅是隐藏的。Thx很多。酷：D如果你需要检查它返回的设备是什么，js中还有$.browser.device

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>