當分辨率小於

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>