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：

#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

您必须使用@media

创建CSS部分

您需要调整#leftblock（及其他）中的值，以使其符合您的需要

例如：

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

   #leftBlock {      
   max-height: 350px;     
   }

}

根据您的需要，您实际上可以使用不同的屏幕尺寸。

使用％代替px也是一种使其更加灵活的计划。

Answer 2

媒体查询肯定有助于实现这一目标。首先，对于移动设备，你可以做这样的事情

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

}

Answer 3

您可以使用CSS3媒体查询为不同的屏幕尺寸添加规则或使用某些网格，如bootstrap或flexboxgrid。

制作带有div，图像，视频响应的页面

3 个答案: