Html 制作带有div、图像和视频的页面

首先，这里有一点CSS，所以我很抱歉必须通读一遍。我还在努力学习这些东西

在很大程度上，页面是响应性的，因为我可以缩小它的大小并进行调整。然而，似乎一旦它达到那种iphone分辨率或它变得太小，一些文本开始消失，页眉中的图像消失，应该在右侧div中的视频向下移动到页脚。我不知道如何防止这种情况。链接到下面的jsfiddle

HTML:

---

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

您必须使用@media创建CSS节

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

例：

根据您的需要，您实际上可以使用不同的屏幕大小

---

使用%而不是px也是一个使其更加灵活的计划。

媒体查询肯定会有帮助。对于mobile first，您可以这样做

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

}

---

通常的解决方案是使用@media规则在小屏幕上设置不同的CSS。嘿，谢谢。我调查过这件事。问题-我是否需要对每个设备进行@media查询？从iphone4->7 plus ipads加横向/纵向模式的一切？可以直接瞄准特定的手机，因为它们对CSS的反应不同，但是如果你使用屏幕大小和%，这应该涵盖大部分，Chrome有一些内置的手机/键盘，你可以在上面测试你的网站。虽然模拟并不总是100%准确，但它仍然是一个很好的工具。谢谢看来@media是一个不错的选择。只要再仔细看看就行了。再次感谢。

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

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

   #leftBlock {      
   max-height: 350px;     
   }

}

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

}