画面のサイズを変更したときにdivを作成する

Question

HTMLだけで画面のサイズを変更し、media queriesのdivを作成することはできますか？

たとえば、ここに私が達成しようとしています何の視覚的である：

問題は私の構成では、私は1つの親のdivにロゴのdivとナビゲーションの両方を持っているということですが、スクリーンここで

私は、ナビゲーションのdivは（異なるスタイルを持つ）別のエンティティになりたい、リサイズされた私の現在のdiv構造である：

nav-container 
    logo-holder 
    navigation-div 
     nav 

それは可能ですか？

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

は、このセクションのための2つの別々のHTML構造を考えてみましょう。ここに私の現在のアプローチです。

1つのdivはデスクトップに対応します。もう一方はモバイルに対応します。

デスクトップバージョンがアクティブな場合、モバイルバージョンはdisplay: noneです。およびその逆。ここで

が、これがどのように動作するかの簡単な例です：

#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

あなたがメディアでjQueryの

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

を使用して、このようなdiv要素を追加することができますクエリuが例えばウィンドウサイズ

に応じて任意の本部を表示または非表示にすることができます。

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

私は画面サイズがメディアクエリ

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

を使用未満767px

あるとき、これは、DIV表示したいです

あなたはこのコンセプトから覚えておくことができます 乾杯します