響應式CSS不能在景觀上工作

我正在實施一個響應式網站，即使它在平板電腦和智能手機上以正常方向工作，但當我將其翻轉至水平方向時，設計也會混亂，當我手動重新設置網站的頁腳大小時，它的位置應該是。響應式CSS不能在景觀上工作

我一直在嘗試幾天，讓我知道如果你有類似的問題。

我的代碼：

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

來源

2014-11-09 Midriel

你能提供比如你看見什麼屏幕上？你可以做一個最小的HTML和CSS來重現你的問題？ – 2014-11-09 15:50:13

嘗試加入這個元標記到你的頭：

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

來源

2014-11-09 07:18:45

感謝卡米爾。我正在使用，然後我刪除了它並將其添加到頭部，但似乎沒有任何區別。我認爲問題出在內容和頁腳上......還有其他想法嗎？ – Midriel 2014-11-09 07:53:24

響應式CSS不能在景觀上工作

回答

相關問題