Question

这是整个网站的问题，而不仅仅是一个div或部分。为了使我的网站响应，我正在使用媒体查询。为了帮助我提供响应式样式，我使用的是Grids.css。我按如下方式设置媒体查询：

<li>
    <div class="card">
        <div class="card__bd">
            <div class="feature">
                <div class="feature__media">
                    <a class="imgLink" href="<?php the_permalink(); ?>">
                        <img src="<?php the_field('media_image',$post_ID) ?>" alt="<?php the_field('media_image',$postID) ?>" />
                    </a>
                </div>
                <div class="feature__hd">
                    <h2 class="hdg hdg--lg">
                       <a href="<?php the_permalink($postID); ?>"><?php the_title(); ?></a>
                    </h2>
                </div>
                <div class="feature__bd">
                    <?php the_excerpt($postID); ?>
                </div>
            </div>
        </div>
    </div>
</li>

这对应于html中的以下内容：

@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%;

    }  
  }

这是相应的样式，没有任何媒体查询：

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

以下是Google {3}}上的Google Nexus 4的内容：

以下是384 px上镀铬窗口的样子。这是我想要的效果，并已编码到媒体查询中;但它不起作用。

Answer 1

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

将其放入您的html <head>

中

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

有关更多信息，请查看此站点： http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 2

尝试从媒体查询中删除“仅”。另外，请确保已将视口元标记添加到网页<meta name="viewport" content="width=device-width, initial-scale=1">

的头部

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

2 个答案: