如何使我的HTML页面灵活/响应iPhone 6s

我用CSS制作了我的HTML页面，在PC上一切看起来都很好！但是在我的iphone6s上，我的视图有一些问题：（我试图用CSS使页面灵活，但没有结果..有人能帮我吗

我试过这个：

@media (max-width:1024px) {

.ImageBig {

    max-width: 100%;
  height:auto;
}



.OpenContainer {
   width: 100%;
   overflow:hidden;
    top:0;
   background-color:white;

}


.ImageContainer {
    max-width: 100%;
height:auto;
 margin: 0 auto; 
top: 76%;
display: block;
position:absolute;


}


.ImageInfo {

    background-color:#bfc0c4;
    padding:10px;
    float: none;
  display: block;


}

.ImageBuy {
    background-color:#e5e8ed;
    padding:10px;
    font-weight: bold;
}


.exit {
    position: fixed;
    top: 1em;
    right: 1em;
    color:black;
}



}

但是它仍然没有表现出好的一面。。 我希望它会显示如下：

您可以在此处看到带有CSS的整个HTML页面：

--

如果有人能帮我解决这个问题，我会非常感激的

---

非常感谢！

在这里。请注意，我主要调整了

html

markup.Cleanup

body{overflow-x:hidden；边距：0；填充：0；}
.OpenContainer{
宽度：100vw；
最小高度：100vh；
背景色：白色；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
}
.ImageContainer{
位置：相对位置；
最大宽度：960像素；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit-align-self:center；
-ms flex项目对齐：居中；
自对准：居中；
}
.ImageInfo{
-webkit-box-flex:0；
-webkit flex:0 250px；
-ms-flex:0-250px；
柔性：0 250像素；
背景色：#bfc0c4；
填充：10px；
}
.ImageInfo h2{
边缘底部：2rem；
}
社会医学博士{
页边顶部：1rem；
}
.md社交>a、.sm社交>a{
显示：内联块；
最大高度：35px；
溢出：隐藏；
}
.ImageBuy{
-webkit-box-flex:0；
-webkit-flex:062px；
-ms-flex:062px；
flex:062px；
背景色：#e5e8ed；
填充：10px；
字体大小：粗体；
}
.sm社交img、.md社交img{
宽度：39px；
高度：36px；
}
输入[类型=图像]{
显示：内联块；
}
.sm社会{
显示：无；
}
.退出{
位置：固定；
顶部：1米；
右：1em；
颜色：黑色；
z指数：1；
}
@介质（最大宽度：991px）{
.ImageContainer{
最大宽度：750px；
}
}
@介质（最大宽度：768px）{
.ImageContainer{
最大宽度：继承；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
最小高度：100vh；
}
.ImageInfo{
-webkit-box-flex:1；
-webkit flex:1自动；
-ms-flex:1自动；
flex:1自动；
}
.ImageBuy{
-webkit-box-flex:0；
-webkit flex:0 0自动；
-ms-flex:0自动；
flex:0自动；
}
社会医学博士{
显示：无；
}
.sm社会{
显示：内联块；
}
.ImageBuy{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.ImageBuy>*：最后一个孩子{
-webkit-box-flex:0；
-webkit-flex:080px；
-ms-flex:080px；
flex:080px；
文本对齐：居中；
}
}

阿姆斯特丹
繁忙的阿姆斯特丹河旁的卡雷剧院

关键词：卡尔、阿姆斯特丹、洛克、阿姆斯特丹河
ams1

首先，我建议将社交按钮与购物车放在同一个div中。您会发现其中一个问题是图像太宽，无法使用

height:auto

，您需要另一种方法，可能会给图像指定一个特定的高度，然后应用

width:auto

，并让其容器隐藏溢出的内容期望的要求，也许我们可以聊聊？为什么雇佣一个专业的网络开发人员是没有人考虑的事情呢？他们不想自己修车，但每个人都在建立自己的网站。而且，他们指责框架、主机或任何其他他们能想到的东西……网站没有外观或行为ng专业。我预订过多，但我建议你从你自己的国家（甚至是你自己的地区）雇佣一个拥有不错投资组合的人。当你建立一个网站时，熟悉目标受众的想法和感受是一项巨大的资产。谢谢Andrei！非常感谢！但为什么要两次社交媒体呢（因为您需要它们在DOM中的两个不同位置按您指定的方式显示。如果它们必须是唯一的，则可以使用JavaScript在调整大小事件时动态移动它们。