製作一個頁面瓦/ divs，圖像，視頻響應

首先，這裏有一些CSS，所以我很抱歉通讀。我仍然在努力學習這些東西。製作一個頁面瓦/ divs，圖像，視頻響應

大多數情況下，頁面響應的意義在於，我可以將其縮小並適應它。然而，看起來好像一旦它觸及該類型的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：

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

來源

2017-06-12 Brandon

通常的解決方案是使用@media規則在小屏幕尺寸設置不同的CSS。 https://www.w3.org/TR/css3-mediaqueries/ –

你必須創建@media

你需要在你#leftblock（及其他）調整數值爲他們CSS部分，以適應你需要/想什麼

例如：

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

    #leftBlock {  
    max-height: 350px;  
    } 

}

根據您的需要，您實際上可以使用不同的屏幕尺寸。

使用％而不是px也是一個使它更加靈活的計劃。

來源

2017-06-12 14:54:34 Aloha

嘿，謝謝。我看着這個。問題 - 我是否需要爲每個設備進行@media查詢？一切從iphone4-> 7加ipad加上風景/肖像模式？ – Brandon

可以直接在特定的手機上進行動畫，因爲它們並不都以同樣的方式對CSS做出反應，但如果使用**屏幕尺寸**和**％**，這應該覆蓋最多，Chrome會有一些內置手機/手機可以測試您的網站。雖然模擬並不總是100％準確，但它仍然是一個不錯的工具。 – Aloha

太棒了。謝謝。看起來@media是去這裏的路。只需要多看一點。再次感謝。 – Brandon

-1

您可以使用CSS3媒體查詢爲不同的屏幕尺寸或使用添加規則一些網格，比如bootstrap或flexboxgrid。

來源

2017-06-12 14:49:12 netoguimaraes

媒體查詢肯定可以幫助事實，這將是它。對於移動首先你可以做這樣的事情

#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; 
    } 

}

來源

2017-06-12 15:23:27 princewal

製作一個頁面瓦/ divs，圖像，視頻響應

回答

相關問題