Question

我有两个在桌面上可以正常使用的容器，但是在我的iPhone上我希望垂直填充屏幕50/50 like this example。

我想在这种情况下使用CSS媒体查询特别适用于iPhone，这在CSS中已经可见。我很难弄清楚如何正确地装好这些容器，因此两者都会在每个垂直方向上显示50％的图像，并自动将其放入全宽度。我如何获得这些容器？这是HTML和CSS：

#container {
  width: 500px;
  margin: auto !important;
  display: block;
  height: 500px;
  position: relative;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#container2 {
  width: 500px;
  margin: auto !important;
  padding-top 200px;
  display: block;
  height: 500px;
  position: relative;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buddy {
  display: none;
  color: #fff;
  padding: 20px;
  width: 360px;
  height: 360px;
  top: 50px;
  left: 50px;
  position: absolute;
  cursor: hand;
}

.buddy2 {
  display: none;
  color: #fff;
  padding: 20px;
  width: 360px;
  height: 360px;
  top: 50px;
  left: 50px;
  position: absolute;
  cursor: hand;
}

.avatar {
  background: #fff;
  width: 340px;
  height: 340px;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  background-size: 100% auto !important;
  background-position: center;
 background-repeat: no-repeat;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 

/* iPhone media query */
  
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
    <div class="buddy" style="display: block;"><div class="avatar" background-image: url(http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg)"></div></div>
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://stylonica.com/wp-content/uploads/2014/03/Cat-cats-32040775-1440-900.jpg)"></div></div>  
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://cbsnews2.cbsistatic.com/hub/i/r/2014/04/15/4ea65e0b-4b11-43d8-9751-1a52f7a9fc3a/thumbnail/620x350/75a030bb4fb3f6576ddaa6e44371d0f1/cat-istock-000025213483.jpg)"></div></div>  
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2014/06/BnYHSYlIYAAn9gj-1.png)"></div></div>  
  </div>
  
    <div id="container2">
    <div class="buddy2" style="display: block;"><div class="avatar" background-image: url(http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg)"></div></div>
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://stylonica.com/wp-content/uploads/2014/03/Cat-cats-32040775-1440-900.jpg)"></div></div>  
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://cbsnews2.cbsistatic.com/hub/i/r/2014/04/15/4ea65e0b-4b11-43d8-9751-1a52f7a9fc3a/thumbnail/620x350/75a030bb4fb3f6576ddaa6e44371d0f1/cat-istock-000025213483.jpg)"></div></div>  
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2014/06/BnYHSYlIYAAn9gj-1.png)"></div></div>  
  </div>
</body>
</html>

您可以在此处查看代码并进行调整http://jsfiddle.net/zu2q9rh4/1/

Answer 1

为了让您的容器填满屏幕，您必须使用width:100%，然后在媒体查询中添加它。这将横向跨越您的容器。

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 

#container, #container2{
width:100%;
}

}

如果您希望每个容器都占屏幕高度的50％，您可以找出设备的屏幕尺寸并将每个容器的高度设置为其一半，或者您可以将容器包裹起来您的容器并将子容器设置为父容器高度的一半。

<div id="parentContainer">
  <div id="container"></div>
  <div id="container2"></div>
</div><!--end parentContainer-->

#parentContainer{
height:500px;
}
#container, #container2{
height:50%; //this will be 50% of the parent container
}

两个CSS容器div垂直对齐填充屏幕50/50（媒体查询）

1 个答案: