网站在我的笔记本电脑上响应，但不是在手机或平板电脑上

这是整个网站的问题，而不仅仅是一个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

网站在我的笔记本电脑上响应，但不是在手机或平板电脑上

回答

相关问题