我已经用CSS创建了我的HTML页面,并且PC上的一切看起来都很好!但是在我的iPhone 6S上,我对视图有一些问题:(我试图使页面灵活使用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/
-
如果有人可以帮我解决这个问题,我将非常感激!
非常感谢!
答案 0 :(得分:3)
在这里。请注意我调整了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>
我还修复了桌面视图(当页面高度小于图像高度时,它确实存在问题)。
你不欠我任何东西。第一个在房子里。
干杯!