18910140161

Html

首页 >> 前端开发 >> Html

HTML-CSS媒体查询有选择地不工作-堆栈溢出

顺晟科技

2022-10-19 13:21:36

47

提前感谢。

我正在研究一个挑战项目的移动响应性，我的媒体查询只是选择性地工作。以下是完整的HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Frontend Mentor | Sunnyside agency landing page</title>
</head>

<body>

  <section class="splash_page">
    <header>
      <nav class="navbar">
        <img src="./images/logo.svg" class="sunnyside_logo" alt="sunnyside_logo">
        <ul class="nav_links">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#" class="contact_button">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="intro_screen">
      <h2>We are creatives</h2>
      <img src="images/icon-arrow-down.svg" />
    </div>
  </section>

  <section class="grid_card">
    <div class="card_information">
      <div class="transform_information_container">
        <h2>Transform your brand</h2>
        <p>We are a full-service creative agency specializing in helping brands grow fast.
          Engage your clients through compelling visuals that do most of the marketing for you.</p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-transform.jpg" />
    </div>
  </section>
  <section class="grid_card_2">
    <div class="card_information">
      <div class="stand_out_information_container">
        <h2>Stand out to the right audience</h2>
        <p> Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters,
          we’ll build and extend your brand in digital places.
        </p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-stand-out.jpg" />
    </div>
  </section>
  <section class="grid_card_3">
    <div class="card_image">
      <div class="graphic_design_text">
        <h2> Graphic Design</h2>
        <p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures
          potential clients’ attention.
        </p>
      </div>
      <img src="./images/desktop/image-graphic-design.jpg" />
    </div>
    <div class="card_image">
      <div class="photography_text">
        <h2>Photography</h2>
        <p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
        </p>
      </div>
      <img src="./images/desktop/image-photography.jpg" />
    </div>
    </div>
  </section>
  <section class="testimonials">
    <h2>Client Testimonials</h2>
    <div class="testimonial_group">
      <div class="single_testimonial">
        <img src="images/image-emily.jpg" />
        <p> We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always
          hit.
        </p>
        <h3 class="testimonial_name">
          Emily R.
        </h3>
        <small>Marketing Director</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-thomas.jpg" />
        <p> Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and
          enjoyable experience.
        </p>
        <h3 class="testimonial_name">
          Thomas S.
        </h3>
        <small>Chief Operating Officer</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-jennie.jpg" />
        <p> Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
        </p>
        <h3 class="testimonial_name">
          Jennie F.
        </h3>
        <small>Business Owner</small>
      </div>
    </div>
  </section>
  <section class="footer">
    <div class="image_banner">
      <img src="./images/desktop/image-gallery-milkbottles.jpg">
      <img src="./images/desktop/image-gallery-orange.jpg">
      <img src="./images/desktop/image-gallery-cone.jpg">
      <img src="./images/desktop/image-gallery-sugarcubes.jpg">
    </div>
    <div class="banner_information">
      <img src="./images/logo-footer.svg" class="logo_footer"/>
      <div class="footer_nav">
        <p>About</p>
        <p>Services</p>
        <p>Projects</p>
      </div>
      <div class="footer_links">
        <svg class="facebook_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="instagram_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.338-9.87a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="twitter_logo" width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="pinterest_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.176-4.068-2.845 0-4.516 2.135-4.516 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S15.523 0 10 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
      </div>
    </div>
  </section>
  <script src="script.js"></script>
</body>

</html>

以下是整个CSS:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Frontend Mentor | Sunnyside agency landing page</title>
</head>

<body>

  <section class="splash_page">
    <header>
      <nav class="navbar">
        <img src="./images/logo.svg" class="sunnyside_logo" alt="sunnyside_logo">
        <ul class="nav_links">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#" class="contact_button">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="intro_screen">
      <h2>We are creatives</h2>
      <img src="images/icon-arrow-down.svg" />
    </div>
  </section>

  <section class="grid_card">
    <div class="card_information">
      <div class="transform_information_container">
        <h2>Transform your brand</h2>
        <p>We are a full-service creative agency specializing in helping brands grow fast.
          Engage your clients through compelling visuals that do most of the marketing for you.</p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-transform.jpg" />
    </div>
  </section>
  <section class="grid_card_2">
    <div class="card_information">
      <div class="stand_out_information_container">
        <h2>Stand out to the right audience</h2>
        <p> Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters,
          we’ll build and extend your brand in digital places.
        </p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-stand-out.jpg" />
    </div>
  </section>
  <section class="grid_card_3">
    <div class="card_image">
      <div class="graphic_design_text">
        <h2> Graphic Design</h2>
        <p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures
          potential clients’ attention.
        </p>
      </div>
      <img src="./images/desktop/image-graphic-design.jpg" />
    </div>
    <div class="card_image">
      <div class="photography_text">
        <h2>Photography</h2>
        <p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
        </p>
      </div>
      <img src="./images/desktop/image-photography.jpg" />
    </div>
    </div>
  </section>
  <section class="testimonials">
    <h2>Client Testimonials</h2>
    <div class="testimonial_group">
      <div class="single_testimonial">
        <img src="images/image-emily.jpg" />
        <p> We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always
          hit.
        </p>
        <h3 class="testimonial_name">
          Emily R.
        </h3>
        <small>Marketing Director</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-thomas.jpg" />
        <p> Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and
          enjoyable experience.
        </p>
        <h3 class="testimonial_name">
          Thomas S.
        </h3>
        <small>Chief Operating Officer</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-jennie.jpg" />
        <p> Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
        </p>
        <h3 class="testimonial_name">
          Jennie F.
        </h3>
        <small>Business Owner</small>
      </div>
    </div>
  </section>
  <section class="footer">
    <div class="image_banner">
      <img src="./images/desktop/image-gallery-milkbottles.jpg">
      <img src="./images/desktop/image-gallery-orange.jpg">
      <img src="./images/desktop/image-gallery-cone.jpg">
      <img src="./images/desktop/image-gallery-sugarcubes.jpg">
    </div>
    <div class="banner_information">
      <img src="./images/logo-footer.svg" class="logo_footer"/>
      <div class="footer_nav">
        <p>About</p>
        <p>Services</p>
        <p>Projects</p>
      </div>
      <div class="footer_links">
        <svg class="facebook_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="instagram_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.338-9.87a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="twitter_logo" width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="pinterest_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.176-4.068-2.845 0-4.516 2.135-4.516 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S15.523 0 10 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
      </div>
    </div>
  </section>
  <script src="script.js"></script>
</body>

</html>

我的问题出在CSS代码的末尾:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Frontend Mentor | Sunnyside agency landing page</title>
</head>

<body>

  <section class="splash_page">
    <header>
      <nav class="navbar">
        <img src="./images/logo.svg" class="sunnyside_logo" alt="sunnyside_logo">
        <ul class="nav_links">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#" class="contact_button">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="intro_screen">
      <h2>We are creatives</h2>
      <img src="images/icon-arrow-down.svg" />
    </div>
  </section>

  <section class="grid_card">
    <div class="card_information">
      <div class="transform_information_container">
        <h2>Transform your brand</h2>
        <p>We are a full-service creative agency specializing in helping brands grow fast.
          Engage your clients through compelling visuals that do most of the marketing for you.</p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-transform.jpg" />
    </div>
  </section>
  <section class="grid_card_2">
    <div class="card_information">
      <div class="stand_out_information_container">
        <h2>Stand out to the right audience</h2>
        <p> Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters,
          we’ll build and extend your brand in digital places.
        </p>
        <a>Learn More</a>
      </div>
    </div>
    <div class="card_image">
      <img src="./images/desktop/image-stand-out.jpg" />
    </div>
  </section>
  <section class="grid_card_3">
    <div class="card_image">
      <div class="graphic_design_text">
        <h2> Graphic Design</h2>
        <p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures
          potential clients’ attention.
        </p>
      </div>
      <img src="./images/desktop/image-graphic-design.jpg" />
    </div>
    <div class="card_image">
      <div class="photography_text">
        <h2>Photography</h2>
        <p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
        </p>
      </div>
      <img src="./images/desktop/image-photography.jpg" />
    </div>
    </div>
  </section>
  <section class="testimonials">
    <h2>Client Testimonials</h2>
    <div class="testimonial_group">
      <div class="single_testimonial">
        <img src="images/image-emily.jpg" />
        <p> We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always
          hit.
        </p>
        <h3 class="testimonial_name">
          Emily R.
        </h3>
        <small>Marketing Director</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-thomas.jpg" />
        <p> Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and
          enjoyable experience.
        </p>
        <h3 class="testimonial_name">
          Thomas S.
        </h3>
        <small>Chief Operating Officer</small>
      </div>
      <div class="single_testimonial">
        <img src="images/image-jennie.jpg" />
        <p> Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
        </p>
        <h3 class="testimonial_name">
          Jennie F.
        </h3>
        <small>Business Owner</small>
      </div>
    </div>
  </section>
  <section class="footer">
    <div class="image_banner">
      <img src="./images/desktop/image-gallery-milkbottles.jpg">
      <img src="./images/desktop/image-gallery-orange.jpg">
      <img src="./images/desktop/image-gallery-cone.jpg">
      <img src="./images/desktop/image-gallery-sugarcubes.jpg">
    </div>
    <div class="banner_information">
      <img src="./images/logo-footer.svg" class="logo_footer"/>
      <div class="footer_nav">
        <p>About</p>
        <p>Services</p>
        <p>Projects</p>
      </div>
      <div class="footer_links">
        <svg class="facebook_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="instagram_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.338-9.87a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="twitter_logo" width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
        <svg class="pinterest_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.176-4.068-2.845 0-4.516 2.135-4.516 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S15.523 0 10 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
      </div>
    </div>
  </section>
  <script src="script.js"></script>
</body>

</html>

前两个媒体查询最大宽度:1440px和最大宽度:1200px功能正常。

接下来的两个，max-width:992px和max-width:600px完全不起作用。992项的红色用于测试。

如果我注释掉前两个条目--可以工作的较大查询--下一个条目实际上会起作用。我还尝试重新定位媒体查询，但出现了相同的问题：顶部的查询将起作用，而底部的则不起作用。

我认为问题可能源于我缺少最小高度参数，尽管我已经尝试将这些参数添加到现有代码中，但它破坏或调整了它们的当前功能，或者是我的查询定位。非常感谢您的帮助！

顺晟科技：

  • TAG：
上一篇：JavaScript--我试图打印出 下一篇：Python-Web Scraphi
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！