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

Question

我已经用 CSS 制作了我的 HTML 页面，在 PC 上一切看起来都很好!但是在我的 iPhone 6S 上，我的 View 有一些问题:( 我尝试使用 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 页面:

https://jsfiddle.net/hntbojao/1/

--

如果有人能帮我解决这个问题，我将不胜感激!

非常感谢!

Answer 1

在这里。请注意我调整了 html 标记。主要是清理。

body {overflow-x: hidden; margin: 0; padding: 0;}
.OpenContainer {
    width: 100vw;
    min-height: 100vh;
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ImageContainer {
    position: relative;
    max-width: 960px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.ImageInfo {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 250px;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    background-color:#bfc0c4;
    padding:10px;
}
.ImageInfo h2 {
    margin-bottom: 2rem;
}
.md-social {
    margin-top: 1rem;
}
.md-social>a,.sm-social>a {
    display: inline-block;
    max-height: 35px;
    overflow: hidden;
}
.ImageBuy {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 62px;
    -ms-flex: 0 0 62px;
    flex: 0 0 62px;
    background-color:#e5e8ed;
    padding:10px;
    font-weight: bold;
}
.sm-social img, .md-social img {
    width: 39px;
    height: 36px;
}
input[type=image] {
    display: inline-block;
}
.sm-social {
    display: none;
}
.exit {
    position: fixed;
    top: 1em;
    right: 1em;
    color:black;
    z-index:1;
}
@media (max-width: 991px) {
    .ImageContainer {
        max-width: 750px;
    }
}
@media (max-width: 768px) {
    .ImageContainer {
        max-width: inherit;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }
    .ImageInfo {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }
    .ImageBuy {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    .md-social {
        display: none;
    }
    .sm-social {
        display: inline-block;
    }
    .ImageBuy {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .ImageBuy>*:last-child {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 80px;
        -ms-flex: 0 0 80px;
        flex: 0 0 80px;
        text-align: center;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" crossorigin="anonymous" />

<div class="OpenContainer">
  <a class="exit" href="#"><i class="fa fa-times fa-2x"></i></a>
  <div class="ImageContainer">
    <div class="ImageBig">
      <img src="http://i.imgur.com/fWtWeUr.png" alt="" class="img-responsive" />
    </div>
    <div class="ImageInfo">
      <h2>Amsterdam</h2>
      <p>Carré Theatre alongside the busy Amstel river.</p>
      <div class="md-social">
        <a href="" target="_blank">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/FFPzxIb.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
      </div>
      <p>Keywords: #Carre, #Amsterdam, #Locks, #AmstelRiver</div>
    <div class="ImageBuy">
      <div class="sm-social">
        <a href="" target="_blank">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/FFPzxIb.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
      </div>
      <div>
        <input type="image" src="http://i.imgur.com/FLdR6hX.png" border="0" name="submit" alt="PayPal, The safer, easier way to pay online!">
        <div>ams1</div>
      </div>
    </div>

  </div>
</div>

我还修复了桌面 View (当页面高度小于图像高度时会出现真正的问题)。

你不欠我什么。第一个在房子里。

干杯!