Question

我正在实施一个快速响应的网站，尽管它正在运作平板电脑和智能手机上的正常方向，但当我翻转它水平设计也会在正常方向上混乱当我手动重新调整页脚的大小时，页脚就会出现，而且它就是这样应该保持在底部。

我已经尝试了几天，如果您遇到类似的问题，请告诉我。

我的代码：

 <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;
    }
}

Answer 1

尝试将此元标记添加到您的头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

响应css不在景观上工作

1 个答案: