versteckt ein DIV, wenn die Auflösung kleiner ist als

Question

Zunächst einmal bin ich ein N00b, wenn es um das Coding geht und auch PHP, aber ich mag es zu entwerfen und ich mag es zu schreiben. Die Frage ist hoffentlich einfach und ich habe versucht, nach einer Antwort zu suchen und habe auch ein paar Antworten ausprobiert, von denen ich dachte, dass sie genau richtig wären, aber ich kann es nicht funktionieren lassen. Entweder es passiert nichts überhaupt von hohen Auflösungen niedrig zu unterscheiden oder ich einen anderen Fehler machen und einen leeren Bildschirm bekommen statt:/

Mein DIV ist:

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

Meine CSS für das div ist:

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

ich diesen Teil irgendwo gefunden (und es sah ziemlich geradlinig), aber ich kann nicht scheinen, es .. zu arbeiten

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

Ich möchte, dass mein DIV (das Floating-Logo) auf großen Bildschirmen angezeigt wird, aber bei einem Telefon, einem kleineren Tablet oder einer wirklich niedrigen Auflösung macht es Probleme, und ich möchte es nur mit geringer Auflösung überspringen.

Wenn jemand hier könnte mir diese Scheiße setzen helfen zusammen würde ich für immer dankbar sein :)

Answer 1

Sie können eine CSS-basierte auf dem Bildschirm-Breite

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

Answer 2

denken erstelle ich Ihnen CSS-Medienabfragen verwenden können dafür. Sie können div für bestimmte Auflösungen ausblenden.

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

dies verstecken div mit id = logo_float in Auflösung, die höher oder gleich 320 und niedriger als 768.

Referenz Link: http://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 3

Verwenden Sie ein media query:

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

Es ermöglicht Ihnen, dass Ihr Element auf Bildschirmen höher als 1024px und zu angezeigt wird auf Bildschirmen mit weniger als 1024px versteckt werden.

Answer 4

Sie suchen hier wahrscheinlich nach CSS-Medienabfragen.

Info: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Im Einzelnen:

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

Dies wird alles mit der Klasse .your-class auf Bildschirmen verbergen, die als 1000px in der Breite kleiner sind.

Ich mag eine .no-mobile Klasse verwenden, wenn dies zu tun, wie so:

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

Answer 5

Auch Pro Frage der Medien.Aber wenn Sie Javascript erforderlich/jQuery dies zu tun:

<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>