网站对我的笔记本电脑有响应,但不适用于手机或平板电脑

Question

网站对我的笔记本电脑有响应,但不适用于手机或平板电脑

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

    }  
  }

Run Code Online (Sandbox Code Playgroud)

这对应于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>

Run Code Online (Sandbox Code Playgroud)

这是相应的样式,没有任何媒体查询:

* {
    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%;

}

Run Code Online (Sandbox Code Playgroud)

以下是Google Nexus 4在384像素上的样子:

这是它在400px的镀铬窗口上的样子.这是我想要的效果,并已编码到媒体查询中; 但它不起作用.

Answer 1

小智 5

您尚未发布完整的源代码.但我敢打赌你已经忘记了视口元标记

把它放在你的html中 <head>

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

Run Code Online (Sandbox Code Playgroud)

有关更多信息,请访问以下网站:http: //www.w3schools.com/css/css_rwd_viewport.asp

归档时间：	10 年，1 月前
查看次数：	100 次
最近记录：	10 年，1 月前