網站在我的筆記本電腦上響應，但不是在手機或平板電腦上

這是整個網站的問題，而不僅僅是一個div或部分。爲了使我的網站響應，我正在使用媒體查詢。爲了幫助我使用響應式樣式，我使用了Grids.css。我設置了媒體查詢，如下所示：網站在我的筆記本電腦上響應，但不是在手機或平板電腦上

@media only screen and (max-width: 850px) { 


    .section-web-projects { 
     height: 290vh; 
    } 

     .skills div.col { 
     width: 100%;  
    } 

    .skills-div { 

     width: 100%; 
     height: auto; 
     padding-bottom: -20px; 
     text-align:center; 
     margin-right: 50px; 
     margin-left: - 50px; 
     font-size: 100%; 

    } 
    }

這對應於HTML如下：

<div class="row">    
    <h2 class="section-header"></h2>  
    </div> 


      <div class="row"> 

       <h2 class="hireme-web"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h2> 


       <div class="skills"> 

        <div class="col span-1-of-4"> 

         <div class="skills-div"> 
          <h3> <i class="ion-iphone skills-div-icon"></i> <i class="ion-ios-monitor-outline skills-div-icon"></i> <i class="ion-ipad skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3> 
         </div> 

        </div> 


     <div class="col span-1-of-4"> 
        <div class="skills-div"> 
        <h3> <i class="ion-ios-locked-outline skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3> 
       </div> 

     </div> 

      </div> <!-- end of skills -->        
    </div> <!-- end of row --> 

</section>

這是沒有任何媒體查詢相應的造型：

* { 
    box-sizing:border-box; 
} 


.row { 
    max-width: 80%; 
    margin: 0 auto; 
} 

.skills { 
    width: 100%; 
    float: left; 
    background-color: antiquewhite; 
} 



.skills-div { 


    padding: 10px; 
    background-color: #1abc9c; 
    opacity: 0.8; 
    text-align:left; 
    margin-bottom: 30px; 
    border-radius: 50px; 
    width: 200px; 
    height: auto; 
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 5px; 
    font-size: 90%; 

}

這裏它在Google Nexus 4上的外觀在384 px：

這裏是wh在它看起來像在鉻窗口400px。這是我想要的效果，並已編碼到媒體查詢中;但它不起作用。

來源

2016-01-12 Frosty619

嘗試從您的媒體查詢中刪除「僅」。此外，請確保您已將視口元標記添加到您的網頁頭部' – user2867288

工作正常！發佈這個作爲答覆，所以我可以給你答案 – Frosty619

嘗試刪除「只有「從您的媒體查詢。此外，請確保您已將視口元標記添加到網頁的頭部<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-01-12 21:41:07 user2867288

您還未發佈完整的源代碼。但我敢打賭，你一定已經忘記了視 meta標籤

只是把這個HTML中<head>

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

欲瞭解更多相關信息查詢網站： http://www.w3schools.com/css/css_rwd_viewport.asp

來源

2016-01-12 21:38:46 0x4Dark

你是對的，所以我給你upvote;但有人已經打敗你了。不過謝謝，它是我再也不會犯的一個錯誤;失去了太多的時間。 – Frosty619

@ Frosty619其實這傢伙首先提供了正確的答案。 –

請看評論部分，user2867288提供了以前的答案作爲評論。 – Frosty619

網站在我的筆記本電腦上響應，但不是在手機或平板電腦上

回答

相關問題