ページの作成/ divs、画像、動画の反応

Question

最初に、これにCSSのビットがありますので、読んで謝りました。私はまだこのことを学びたいと思っています。

ページは、私がそれを縮小して適応させるという意味では反応的です。しかし、一度それがそのタイプのiPhoneの解像度に当たったり、小さすぎたりすると、テキストの一部が消え始め、ヘッダーの画像が消え、右のdivにあるビデオがフッターに移動するようです。私はそれを防ぐ方法がわかりません。リンクの下にjsfiddleする

HTML：

<div id="wrap"> 
<div id="headerBlock"> 
    <div class="headerText"><h2 style="color:white">Header or something</h2>Blah blah text text blah blah</div> 
    <div class="headerImg"><img src="/someimage.jpg" height="250" width="300"> 
    </div> 
</div> 

<div id="leftBlock"> 
      <img src="/sample.png" height="300" width="300"> 
    </div> 

<div id="rightBlock"> 
      <div class="rightText">More text, more text, blah blah blah - video below this 
      </div> 
      <div class="rightVideo"> 
      <video autoplay loop muted> 
      <source src="video.mp4" type="video/mp4"> 
      <source src="video.webm" type="video/webm"> 
      </video> 
      </div> 
    </div> 
<div id="footerBlock"> 
      <p>Footer Text!</p> 
    </div> 

CSS：異なる画面サイズや使用するためのルールを追加するためにあなたはCSS3メディアクエリを使用することができます

#wrap { 
margin: 0 auto; 
max-width: 1200px; 
overflow: hidden; 
float: left; 
} 

#headerBlock { 
height: 300px; 
background: #776b68; 
display: flex; 
align-items: center; 
} 

div.headerText { 
display: inline-block; 
padding-right: 150px; 
padding-left: 20px; 
} 

div.headerImg { 
display: inline-block; 
padding-right: 100px; 
} 

#leftBlock { 
width: 50%; 
height: 500px; 
background-color: black; 
float: left; 
position: relative; 
} 

#leftBlock img { 
position: absolute; 
top: 50%; 
left: 50%; 
transition: transform 7s; 
transform: translate(-50%,-50%); 
} 

#leftBlock img:hover { 
transform: translate(-50%,-50%) scale(1.8); 
} 

#rightBlock { 
width: 50%; 
height: 500px; 
background: #8ab78f; 
float: left; 
position: relative; 
} 

div.rightText { 
padding: 20px 20px 0px 20px; 
} 

div.rightVideo { 
padding: 35px 10px 0 40px; 
} 

video { 
width: 100%; 
max-width: 500px; 
height: auto; 
} 


#footerBlock { 
height: 200px; 
background: #29342a ; 
clear: left; 
} 

#footerBlock p { 
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; 
font-size: 26px; 
text-align: center; 
padding-top: 6%; 
color: white; 
} 

https://jsfiddle.net/4Lk7odtu/1/

Answer 1

は、あなたが/必要欲しいものに合うように彼らのためにあなたの#leftblock（およびその他）の値を調整する必要が@media

とCSSのセクションを作成する必要が

例：

@media screen and (min-width: 480px) and (max-width: 699px) { 

    #leftBlock {  
    max-height: 350px;  
    } 

} 

実際には、必要に応じてさまざまな画面サイズで再生できます。

pxの代わりに％を使用することも、より柔軟にする計画です。

Answer 2

ブートストラップやフレックスボックスグリッドのようなグリッド。

Answer 3

メディアクエリーは間違いなくそのように役立ちます。モバイルの場合、まずこのようなことができます。

#leftBlock { 
     width: 100%; 
     height: 500px; 
     background-color: black; 
     float: none; 
     position: relative; 
    } 
    #rightBlock { 
     width: 100%; 
     height: 500px; 
     background: #8ab78f; 
     float: none; 
     position: relative; 
    } 

    @media only screen and (min-width: 768px){ 
     #leftBlock { 
     width: 50%; 
     float: left; 
    } 
    #rightBlock { 
     width: 50%; 
     float: left; 
    } 

}