【发布时间】：2014-11-09 19:32:07
【问题描述】：
我正在实施一个响应式网站，尽管它正在运行 在正常方向的平板电脑和智能手机上，但是当我将其翻转到 水平设计也会在正常方向上变得混乱 当我手动调整网站大小时，页脚会向上移动，它是 应该留在底部。
我已经尝试了几天，如果你有类似的问题，请告诉我。
我的代码：
<body>
<!--Header-->
<div class="header_container">
<div class="logo">
<a href="index.html"><img src="#" alt="Lorem ipsum dolor" align="center"/></a>
</div>
</div>
<!--Content-->
<div class="content_container">
<div class="middle">
<div class="middle-item">
<div class="loading">
<img src="./img/icon/ajax-loader.gif" align="center" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<p class="small">Lorem ipsum dolor sit amet.</p>
<a class="btn-play-grey" href="#" target="_blank"><img src="#"/></a>
</div>
</div>
</div>
<!--Footer section-->
<div class="footer_container">
<div class="link_footer">
<span class="copyright">All Content Copyright @ Lorem Ipsum Co., Ltd. | Find us on </span><a target="_blank" href="#"><img src="./img/icon/instagram.png"/></a>
</div>
</div>
</body>
/* CSS ================================================== */
* {
margin: 0;
padding: 0;
list-style:none;
}
html,
body { height: 100%; }
/* Body
================================================== */
body {
background: url('../img/bg/large/intro.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
line-height: 1.25;
list-style: none;
text-decoration: none;
margin:0;
padding:0;
position: relative;
min-height:100%;
}
/* Header
================================================== */
.header_container {
position: relative;
background: #e5e5e5;
padding: 21px 0;
width: 100%;
}
.logo {
width: 181px;
height: 33px;
padding-left: 105px;
}
/* Content
================================================== */
.content_container {
margin: 0 auto;
zoom: 1;
}
.content_container .middle{
position: absolute;
text-align: center;
left:0;
right:0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-bottom: 70px;
}
.content_container .middle .middle-item p {
font-size: 20px;
color: #70cbd1;
padding-top: 70px;
margin-left: 40px;
margin-right: 40px;
}
.content_container .middle .middle-item .small {
font-size: 18px;
color: #ffffff;
padding-bottom: 9px;
}
.content_container .middle .middle-item .btn-play-grey img{
height: 65px;
width: 201px;
}
/* Footer
================================================== */
.footer_container {
background: #e5e5e5;
width: 100%;
bottom:0;
height: 70px;
position: absolute;
}
.footer_container .link_footer {
font-size: 16px;
padding-right: 105px;
padding-top: 23px;
font-size: 16px;
font-weight: 300;
text-align: right;
clear:both;
}
.footer_container .link_footer img {
background-repeat: no-repeat;
background-position: center;
background-size: 24px auto;
width: 24px;
height: 24px;
vertical-align: middle;
}
@media only screen and (max-width: 768px) and (orientation : landscape){
html, body {
/* height: auto;*/
background-image: url('../img/bg/small/intro.jpg');
}
.logo {
padding-left: 25px;
}
.footer_container .link_footer {
padding-right: 0;
text-align: center;
padding-left: 0;
}
}
【问题讨论】：
-
你能举例说明你在屏幕上看到了什么吗？你能制作一个最小的 html 和 css 来重现你的问题吗？
标签： html css responsive-design media-queries