当分辨率小于

Question

时隐藏DIV首先，我是一个n00b编程和PHP，但我喜欢设计，我喜欢写。 问题是希望简单，我试图寻找答案，也尝试了一些我认为是现货的答案，但我似乎无法得到它的工作。无论是什么也没有发生在所有从高的分辨率不同，低的或我再拍错误，并得到一个空白屏幕来代替：/

我的DIV是：

<div id="logo_float"><a href="/" title="xyz"><img width="192" height="192" src="../img/logo_float.png"></a></div> 

我的DIV + CSS是：

#logo_float 
{ 
    position: absolute; 
    top: 10px !important; 
    left: 80px !important; 
} 

我发现这部分的地方（和它看起来很简单的），但我似乎无法得到它的工作..

if ($(window).width() < 1024) { 
    // code for small viewports 
} else { 
    // code for large viewports 
} 

我希望我的DIV（浮动标识）能够在大分辨率屏幕上显示，但在使用手机，小型平板电脑或通常非常低的分辨率时，它会带来麻烦，我只想在低分辨率上跳过它。

如果有人在这里可以帮助我把这个狗屎一起我将永远感激:)

Answer 1

您可以根据屏幕宽度

@media screen and (max-width: 1024px) { 
    #logo_float { 
     display:none 
    } 
} 

Answer 2

我想你可以使用CSS媒体查询创建CSS为了这。您可以隐藏特定分辨率的div。

@media screen and (max-width: 767px) and (min-width: 320px) { 
    div#logo_float { 
     display: none; 
    } 
} 

这将隐藏的div与ID =在分辨率高logo_float或等于320和下部768。然后

参考链接：http://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 3

使用media query：

@media screen and (max-width: 1024px){ 
    #logo_float{ 
     display:none; 
    } 
} 

它可以让你的元素将显示在高于1024px的屏幕上，隐藏在小于1024像素的屏幕上。

Answer 4

您可能在此寻找CSS媒体查询。

信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

具体做法是：

@media (max-width: 1000px){ 
    .your-class { 
    display: none; 
    } 
} 

这将隐藏在那些宽度比1000像素较小的屏幕与类.your-class什么。

我喜欢用一个.no-mobile类这样做，像这样的时候：

@media (max-width: 720px) { 
    .no-mobile{ 
    display: none !important; 
    } 
} 

Answer 5

还亲媒体查询。但是，如果你需要使用Javascript/jQuery来做到这一点：

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ \t \t \t \t \t \t 
 
    if ($(window).width() < 1024) { 
 
     $('#logo_float').hide(); 
 
    } else { 
 
     $('#logo_float').show(); 
 
    } 
 
}); 
 
$(window).resize(function() { 
 
    if ($(window).width() < 1024) { 
 
     $('#logo_float').hide(); 
 
    } else { 
 
     $('#logo_float').show(); 
 
    } 
 
}); 
 
</script>