Erstellen div, wenn Bildschirmgröße geändert wird

Question

Ist es möglich, ein div zu erstellen, wenn ein Bildschirm nur mit HTML und media queries Größe geändert wird?

Zum Beispiel, hier ist eine visuelle, was ich zu erreichen bin versucht:

Das Problem, das in meiner Struktur ist, ich habe sowohl das Logo div und Navigation in einem Elternteil div, aber wenn der Bildschirm Größe verändert wird, möchte ich die Navigation div eine separate Einheit sein (mit verschiedenen Stilen)

Hier Struktur meiner aktuellen div:

nav-container 
    logo-holder 
    navigation-div 
     nav 

ist es möglich? Hier ist meine aktuelle Ansatz:

html, 
 
body { 
 
    height: 100%; 
 
    background-color: #fff; 
 
} 
 

 
body { 
 
    background-color: #fff; 
 
    text-align: center; 
 
    margin: 0; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-size: 1rem; 
 
    font-weight: 400; 
 
    line-height: 1.5; 
 
    display: block; 
 
} 
 

 
.site-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); 
 
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.nav-container { 
 
    border-right: 0.5px solid #333; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #333; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.logo-holder { 
 
    position: absolute; 
 
    top: 0; 
 
    text-align: center; 
 
} 
 

 
#navigation-div { 
 
    margin-top: -300px; 
 
    width: 100%; 
 
} 
 

 
.nav-ul li a { 
 
    display: block; 
 
} 
 

 
.nav-link { 
 
    width: 100%; 
 
    display: block; 
 
    text-align: left; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    margin-left: 0px; 
 
    padding-left: 15px; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #fff; 
 
    color: #333; 
 
} 
 

 
.nav ul { 
 
    width: 100%; 
 
    padding-left: 0px; 
 
} 
 

 
.nav ul li { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 1.2em; 
 
    height: 25px; 
 
} 
 

 
.nav ul li a { 
 
    text-align: left; 
 
    padding: 5px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    margin-left: 15px; 
 
} 
 

 
@media screen and (max-width: 540px) { 
 
    .nav-container { 
 
    width: 100%; 
 
    height: 160px; 
 
    background-color: #333; 
 
    border-bottom: 0.5px solid #333; 
 
    } 
 
    .nav-container nav, 
 
    .nav-container nav ul, 
 
    .nav-container nav ul li, 
 
    .logo-holder { 
 
    display: inline; 
 
    } 
 
    .logo-holder { 
 
    overflow: hidden; 
 
    display: block; 
 
    margin: auto; 
 
    width: 40%; 
 
    } 
 
    #navigation-div { 
 
    border: 1px solid red; 
 
    } 
 
    .responsive { 
 
    width: 100%; 
 
    height: 160px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 
    .nav { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
    .nav ul li { 
 
    font-size: 1.2em; 
 
    line-height: 20px; 
 
    height: 20px; 
 
    border-bottom: 1px solid #888; 
 
    float: left; 
 
    } 
 
    .nav ul li a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    transition: .3s; 
 
    } 
 
    /* on screen resize make new div appear */ 
 
}

<div class="site-wrapper"> 
 

 
    <div class="nav-container responsive"> 
 
    <div class="logo-holder"> 
 
     <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" /> 
 
    </div> 
 
    <div id="navigation-div"> 
 
     <nav class="nav"> 
 
     <ul class="nav-ul"> 
 
      <a class="nav-link active" href=""> 
 
      <li>Home</li> 
 
      </a> 
 
      <a class="nav-link" href=""> 
 
      <li>Blog</li> 
 
      </a> 
 
      <a class="nav-link" href=""> 
 
      <li>Store</li> 
 
      </a> 
 
      <a class="nav-link" href=""> 
 
      <li>Contact</li> 
 
      </a> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Betrachten wir zwei separate HTML-Strukturen für diesen Abschnitt.

Ein div dient Desktop. Der andere dient mobil.

Wenn die Desktopversion aktiv ist, hat die mobile Version . Und umgekehrt.

Hier ist ein einfaches Beispiel, wie das funktioniert:

#large-image { display: block; } 
 
#small-image { display: none; } 
 

 
@media (max-width: 500px) { 
 
    #large-image { display: none; } 
 
    #small-image { display: block; } 
 
}

<div> 
 
    <img id="large-image" src="http://i.imgur.com/60PVLis.png" height="200" width="200" alt=""> 
 
    <img id="small-image" src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt=""> 
 
</div>

jsFiddle demo

Answer 2

Sie ein div wie diese

mithilfe von jQuery hinzufügen

jQuery(window).resize(function(){ 
$('body').append('<div style="background-color:red,height:20px;width:20px">This is your Div</div>'); 
}); 

mit Medien Frage dich an u kann je nach Fenstergröße

für Beispiel anzeigen oder jede Div ausblenden:

<div id="foo" style="display:none;height:20px;width:20px;"></div> 

Ich will das div zeigen, wenn Bildschirmgröße kleiner als 767px

Verwenden von Media Abfrage

@@media only screen and (max-width: 767px) { 
#foo{ 
display:block; 
} 
} 

Sie können nehmen und Idee von diesem Konzept Cheers