Question

首先，我不确定这是一个小错误还是一个奇怪的问题。我正在使用HTML5，CSS和一些Javascript进行WebPage设计（前端，无后端）。我遇到的问题是响应能力。我正在使用Mozilla Firefox来测试网页的响应能力（响应模式）。

问题：在Firefox的响应模式下查看时，WebPage的响应能力很好。但是，如果我尝试通过缩小浏览器窗口来测试它，那么根本就没有响应能力。

我无法弄清问题是什么。 我正在使用 CSS媒体查询表示响应。下面给出了一些代码。查看网页：http://www.ammini.edu.in/fetera

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   nav .title {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    nav ul {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 14px;
    }

    #del-countdown {
        display: none;
    }
    #boxes {
        width: 100%;
    }
    #boxes .container {
        width: 90%;
        height: auto;
    }
    #boxes .box {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 15px 0px;
        /* border-bottom: solid white 2px; */
    }
        #boxes .box h3{
        width: 100%;
        height: auto;
        text-align: center;
    }
        #boxes .box p{
        width: 100%;
        height: auto;
        text-align: center;
            overflow: hidden;
    }
        #patrons {
        background-color: #333333;
        font-family: Georgia, sans-serif;
    }

    #patrons .container {
        width: 90%;
    }

    #patrons .box {
        width: 100%;
        text-align: center;
        height: auto;
        padding: 15px 0px;
        color: aliceblue;
    }

    #patrons .box img {
        width: 25%;
        height: auto;
        text-align: center;
        /* border-radius: 50%; */
    }

    #patrons a {
        font-weight: 550;
        font-size: 18px;
        text-align: justify;
        text-decoration: none;
        color: aqua;
    }

    #patrons .box p {
        font-family: Georgia, sans-serif;
        font-weight: 550;
        font-size: 18px;
        text-align: center;
    }
    
    .logo {
    display: block;
    width: 80%;
    height: auto;
    }
    
    .events {
    display: grid;
    grid-template-columns: 1fr;
    }
}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 768px) {
   nav .title {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    nav ul {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 14px;
    }
    
    #del-countdown {
        display: none;
    }
    
    #boxes {
        width: 100%;
    }
    #boxes .container {
        width: 90%;
        height: auto;
    }
    #boxes .box {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 15px 0px;
        /* border-bottom: solid white 2px; */
    }
        #boxes .box h3{
        width: 100%;
        height: auto;
        text-align: center;
    }
        #boxes .box p{
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
    }
    
    
    #patrons {
        background-color: #333333;
        font-family: Georgia, sans-serif;
    }

    #patrons .container {
        width: 90%;
    }

    #patrons .box {
        width: 100%;
        text-align: center;
        height: auto;
        padding: 15px 0px;
        color: aliceblue;
    }

    #patrons .box img {
        width: 25%;
        height: auto;
        text-align: center;
        /* border-radius: 50%; */
    }

    #patrons a {
        font-weight: 550;
        font-size: 18px;
        text-align: justify;
        text-decoration: none;
        color: aqua;
    }

    #patrons .box p {
        font-family: Georgia, sans-serif;
        font-weight: 550;
        font-size: 18px;
        text-align: center;
    }
    .events {
    display: grid;
    grid-template-columns: 1fr ;
    }

}

<section id="patron_div" class="section section-dark">
    <h1 class="title_patron">PATRONS</h1>
    <section id="patrons">
    <div class="container">
        <div class="box" id="box1">
          <img src="./img/principal.png">
            <h3>PATRON</h3>
            <p> Dr.Shashi Dharan<br> Principal, Ammini College of Engineering</p>
        </div>
        <div class="box" id="box2">
          <img src="./img/madhu.png">
          <h3>CHIEF PATRON</h3>
          <p>Mr. K G Madhu<br> Chairman, Ammini College of Engineering</p>
        </div>
        <div class="box" id="box3">
          <img src="./img/hod.png">
          <h3>FEST CO-ORDINATOR</h3>
          <p>Mr. Pradeesh A.R<br> Head of Department, Mechanical Engineering</p>
        </div>
      </div>
      </section>
  </section>

Answer 1

经过长时间的搜索，我得到了答案。

问题是我已将媒体查询设置为 MAX-DEVICE-WIDTH ，而不是针对 MAX-WIDTH 的窗口大小。

响应式网页设计：以响应模式工作，但不是在缩小

1 个答案: