网站发布后CSS CSS查询无法正常工作

Question

所以我一直在一个网站上（我的第一个官方网站），并且我一直在Atom编辑器中进行操作。我使用其中一个实时预览包，并使用它来构建整个网站。当我最终将其上传到想要上传的位置时，我使用了一个名为000webhost的主机。我上载它并转到URL，但是突然我的媒体查询停止了工作。这很奇怪，因为某种原因，媒体查询中的所有CSS（为移动设备调整了大小）已停止工作。显示用于移动菜单的菜单按钮，以及用于移动设备的背景图像。但是，当我在本地打开文件或在实时预览中打开文件时，所有内容都会显示其在移动设备与台式机上应有的方式。我将贴上index.html文件和CSS文件。在此先感谢您的帮助！ （顺便说一句，我知道有很多关于媒体查询的帖子不起作用，但是我浏览了至少15篇，没有任何帮助）（（请原谅可能是草率的代码））

 /* styles.css: */

    html {
      overflow: scroll;
      overflow-x: hidden;
    }
    
    ::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #FF0000;
    }
    
    body {
      font-family: 'Oswald', sans-serif;
    }
    
    /* Links */
    
    a {
      text-decoration: none;
      color: #000000;
    }
    
    a:hover {
      color: #808080;
    }
    
    a:active {
      color: #696969;
    }
    
    .white-link {
      text-decoration: none;
      color: #ffffff;
    }
    
    /* Nav */
    
    #nav-bar {
      position: fixed;
      width: 100%;
      left: 0px;
      top: 0px;
      background-color: #ffffff;
      z-index: 2;
      box-shadow: 10px 3px 6px #696969;
    }
    
    #nav-logo {
      display: inline-block;
      padding-left: 90px;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    
    #nav-logo:hover {
      opacity: 0.5;
    }
    
    #nav-logo:active {
      opacity: 0.3;
    }
    
    #nav-pages {
      position: relative;
      top: 50%;
      transform: translateY(-35%);
      display: inline-block;
      font-size: 270%;
      padding-left: 50px;
    }
    
    #mobile-menu {
      display: block;
    }
    
    .nav-link {
      padding-left: 40px;
      padding-right: 40px;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    
    .nav-link:hover {
      opacity: 0.5;
    }
    
    .nav-link:active {
      opacity: 0.3;
    }
    
    .current {
      opacity: 0.5;
    }
    
    #nav-media {
      position: relative;
      display: inline-block;
      float: right;
      margin-right: 30px;
      margin-top: 27px;
    }
    
    #menu-icon {
      display: none;
      position: relative;
      float: right;
      margin-right: 20px;
      margin-top: 20px;
      padding: 10px;
      background-color: #ffffff;
      border-radius: 0px, 0px, 0px, 5px;
    }
    
    #close-icon {
      display: none;
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px;
    }
    
    .nav-link-media {
      padding-left: 10px;
      padding-right: 10px;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    
    .nav-link-media:hover {
      opacity: 0.5;
    }
    
    .nav-link-media:active {
      opacity: 0.3;
    }
    
    /* Header */
    
    #header-background-image {
      width: 102%;
      position: relative;
      left: -1%;
      z-index: -1;
    }
    
    #header-background-mobile {
      display: none;
    }
    
    #header-message {
      position: absolute;
      text-align: center;
      top: 90%;
      left: 37%;
      font-size: 300%;
      color: #808080;
    }
    
    /* Content */
    
    #content {
      position: relative;
      left: -1%;
      width: 102%;
      background-color: #ffffff;
    }
    
    #mobile {
      display: none;
    }
    
    .section {
      width: 100%;
      text-align: center;
    }
    
    .section-title {
      font-size: 400%;
    }
    
    .odd {
      background-color: #ffffff;
      color: #000000;
    }
    
    .even {
      background-color: #000000;
      color: #ffffff;
    }
    
    .container {
      width: 90%;
      display: inline-block;
      padding: 4%;
    }
    
    .container2 {
      width: 25%;
      display: inline-block;
      padding: 4%;
    }
    
    .container3 {
      width: 25%;
      display: inline-block;
      padding: 4%;
    }
    
    .container23 {
      width: 50%;
      display: inline-block;
      padding: 4%;
    }
    
    .container23-left {
      text-align: left;
      width: 50%;
      display: inline-block;
      padding: 4%;
    }
    
    .container23-left .container-title, .container23-left .container-text {
      text-align: left;
    }
    
    .container-title {
      text-align: center;
      font-size: 350%;
    }
    
    .container-text {
      text-align: center;
      font-size: 170%;
    }
    
    /* Slideshows */
    
    #slideshow-arrows {
      width: 100%;
      display: inline-block;
      left: 0px;
      bottom: 370px;
    }
    
    .left-arrow, .right-arrow {
      cursor: pointer;
      padding: 16px;
      transition: 0.6s ease;
    }
    
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #000000;
      border-radius: 50%;
      display: inline-block;
      opacity: 1;
      vertical-align: 23px;
      transition: opacity 0.6s ease;
    }
    
    .active, .dot:hover, .left-arrow:hover, .right-arrow:hover {
      opacity: 0.5;
    }
    
    /* Banner Slideshow */
    
    #banner-slideshow-image {
      width: 75%;
      transition: opacity .5s ease-in;
    }
    
    #banner-slideshow-image+#banner-slideshow-image {
      opacity: 0;
    }
    
    /* Avatar Slideshow */
    
    #avatar-slideshow-image {
      width: 25%;
      transition: opacity .5s ease-in;
    }
    
    #avatar-slideshow-image+#avatar-slideshow-image {
      opacity: 0;
    }
    
    #video-slideshow {
      width: 640px;
    }
    
    #octocat {
      width: 50%;
      margin: 0 auto;
    }
    
    #portrait {
      height: 500px;
    }
    
    #desk {
      height: 300px;
    }
    
    /* Form */
    
    input {
      font-size: 120%;
    }
    
    label {
      font-size: 120%;
    }
    
    .text-box {
      border: none;
      border-bottom: solid 3px #000000;
      width: 350px;
    }
    
    textarea {
      border: none;
      border-bottom: solid 3px #000000;
      font-size: 120%;
      width: 350px;
    }
    
    input[type="radio"] {
      display: none;
    }
    
    input[type="radio"]+label span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(images/unchecked.png) center no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
    }
    
    label {
      cursor: pointer;
    }
    
    input[type="radio"]:checked+label span {
      background: url(images/checked.png) center no-repeat;
      background-size: 15px 15px;
    }
    
    input[type="submit"] {
      background-color: transparent;
      border: none;
      font-size: 150%;
      padding: 12px;
      cursor: pointer;
      font-family: 'Oswald', sans-serif;
      border-bottom: solid 3px #000000;
      opacity: 1;
      transition: opacity .5s ease-in;
    }
    
    input[type="submit"]:hover {
      opacity: 0.5;
    }
    
    input[type="submit"]:active {
      opacity: 0.3;
    }
    
    /* Mobile */
    
    @media only screen and (max-width: 1024px) {
      #nav-bar {
        background-color: transparent;
        box-shadow: none;
      }
      #nav-logo, #nav-pages, .nav-link, #nav-media {
        display: block;
        float: none;
      }
      #nav-logo {
        width: 50%;
        margin: 0 auto;
        padding: 0px;
        padding-bottom: 70px;
        text-align: center;
      }
      #nav-pages {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        font-size: 200%;
        padding-left: 0px;
      }
      #nav-media {
        width: 70%;
        margin: 0 auto;
        text-align: center;
      }
      #menu-icon {
        display: block;
      }
      #close-icon {
        display: block;
      }
      #header-background-image {
        display: none;
      }
      #header-background-mobile {
        display: block;
        position: relative;
        z-index: -1;
        left: 0px;
        top: 0px;
        width: 100%;
      }
      #header-message {
        display: none;
      }
      #content {
        position: relative;
        left: -1%;
        width: 102%;
        background-color: #ffffff;
      }
      #desktop {
        display: none;
      }
      #mobile {
        display: block;
      }
      #mobile-menu {
        display: none;
        z-index: 2;
        background-color: #ffffff;
        width: 100%;
      }
      .section {
        width: 100%;
        text-align: center;
      }
      .section-title {
        font-size: 300%;
      }
      .odd {
        background-color: #ffffff;
        color: #000000;
      }
      .even {
        background-color: #000000;
        color: #ffffff;
      }
      .container {
        width: 90%;
        display: inline-block;
        padding: 4%;
      }
      .container2 {
        width: 90%;
        display: inline-block;
        padding: 4%;
      }
      .container3 {
        width: 90%;
        display: inline-block;
        padding: 4%;
      }
      .container23 {
        width: 90%;
        display: inline-block;
        padding: 4%;
      }
      .container23-left {
        width: 90%;
        display: inline-block;
        padding: 4%;
      }
      .container23-left .container-title, .container23-left .container-text {
        text-align: center;
      }
      .container-title {
        font-size: 300%;
      }
      .container-text {
        font-size: 140%;
      }
      .dot {
        display: none;
      }
      #banner-slideshow-image {
        width: 90%;
      }
      #avatar-slideshow-image {
        width: 90%;
      }
      #video-slideshow {
        width: 90%;
      }
      #portrait {
        width: 90%;
        height: auto;
      }
      #desk {
        width: 90%;
        height: auto;
      }
      .text-box {
        width: 90%;
      }
      textarea {
        width: 90%;
      }
    }

<!-- index.html: -->

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Home | NRDesign</title>
      <link rel="shortcut icon" type="image/png" href="files/images/logo-dark.png">
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
      <link rel="stylesheet" type="text/css" title="Main" href="files/styles.css">
      <meta name="viewport" content="width=device-width">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    
    <body>
    
      <!--- Nav --->
    
      <div id="nav">
        <div id="nav-bar">
          <div id="mobile-menu">
            <div id="nav-logo"><a href="#"><img src="files/images/logo-dark.svg" width="90px" height="90px" alt="nav-logo" /></a></div>
            <div id="close-icon"><a href="#" onclick="mobileMenuToggle()"><img src="files/images/close.svg" width="40px" height="40px" /></a></div>
            <div id="nav-pages">
              <a class="nav-link current" href="#">Home</a>
              <a class="nav-link" href="about.html">About Me</a>
              <a class="nav-link" href="portfolio.html">My Portfolio</a>
              <a class="nav-link" href="contact.html">Contact Me</a>
            </div>
            <div id="nav-media">
              <a class="nav-link-media" href="https://twitter.com/ngregrichardson" target="_blank"><img src="files/images/twitter-logo.svg" width="40px" height="40px" alt="twitter-logo" /></a>
              <a class="nav-link-media" href="https://www.youtube.com/channel/UCUB_cxZFm_72B5AVvZpJpYg" target="_blank"><img src="files/images/youtube-play-button.svg" width="40px" height="40px" alt="youtube-logo" /></a>
              <a class="nav-link-media" href="https://github.com/ngregrichardson" target="_blank"><img src="files/images/github-logo.svg" width="40px" height="40px" alt="github-logo" /></a>
            </div>
          </div>
          <div id="menu-icon"><a href="#" onclick="mobileMenuToggle()"><img src="files/images/menu.svg" width="40px" height="40px" /></a></div>
        </div>
      </div>
    
      <!-- Header -->
    
      <div id="header">
        <div id="header-background">
          <img id="header-background-image" src="files/images/header-background.jpg" alt="header-background" />
        </div>
        <div id="header-background">
          <img id="header-background-mobile" src="files/images/header-background-mobile.jpg" alt="header-background" />
        </div>
      </div>
    
      <!-- Content -->
      <div id="content">
        <div id="desktop">
          <div class="section odd">
            <div class="container3">
              <div class="container-title">Graphic Design</div>
              <div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
            </div>
            <div class="container3">
              <div class="container-title">About Me</div>
              <div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
            </div>
            <div class="container3">
              <div class="container-title">Programming</div>
              <div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
            </div>
          </div>
        </div>
        <div id="mobile">
          <div class="section odd">
            <div class="container3">
              <div class="container-title">About Me</div>
              <div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
            </div>
            <div class="container3">
              <div class="container-title">Graphic Design</div>
              <div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
            </div>
            <div class="container3">
              <div class="container-title">Programming</div>
              <div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
            </div>
          </div>
        </div>
    
        <div class="section even">
          <div class="container2">
            <div class="container-title">Visual Effects</div>
            <div class="container-text">At the start of my YouTube channel, I began to edit my own videos and try different visual effect creations. I began to improve my workflow by editing videos with Sony Vegas Pro and using Adobe After Effects to create special effects.</div>
          </div>
          <div class="container2">
            <div class="container-title"></div>
            <div class="container-text"></div>
          </div>
          <div class="container2">
            <div class="container-title">Visual Effects</div>
            <div class="container-text">To work with visual effects and video editing I use Sony Vegas Pro 14, Adobe After Effects, Adobe Premiere Pro, and Cinema 4D.</div>
          </div>
        </div>
    
        <div class="section odd">
          <div class="section-title">My Portfolio</div>
          <div id="slideshow">
            <img id="banner-slideshow-image" class="fade" src="files/images/slideshows/banners/avay-banner.jpg" alt="banner-slideshow-image" />
            <div id="slideshow-arrows">
              <img id="banner-left-arrow" class="left-arrow fade" src="files/images/slideshows/left-arrow.png" width="30px" height="30px" onclick="plusBanner(-1)" />
              <span class="dot bannerDot active" onclick="currentBanner(0)"></span>
              <span class="dot bannerDot" onclick="currentBanner(1)"></span>
              <span class="dot bannerDot" onclick="currentBanner(2)"></span>
              <span class="dot bannerDot" onclick="currentBanner(3)"></span>
              <span class="dot bannerDot" onclick="currentBanner(4)"></span>
              <span class="dot bannerDot" onclick="currentBanner(5)"></span>
              <span class="dot bannerDot" onclick="currentBanner(6)"></span>
              <span class="dot bannerDot" onclick="currentBanner(7)"></span>
              <span class="dot bannerDot" onclick="currentBanner(8)"></span>
              <span class="dot bannerDot" onclick="currentBanner(9)"></span>
              <span class="dot bannerDot" onclick="currentBanner(10)"></span>
              <span class="dot bannerDot" onclick="currentBanner(11)"></span>
              <span class="dot bannerDot" onclick="currentBanner(12)"></span>
              <span class="dot bannerDot" onclick="currentBanner(13)"></span>
              <span class="dot bannerDot" onclick="currentBanner(14)"></span>
              <span class="dot bannerDot" onclick="currentBanner(15)"></span>
              <span class="dot bannerDot" onclick="currentBanner(16)"></span>
              <span class="dot bannerDot" onclick="currentBanner(17)"></span>
              <span class="dot bannerDot" onclick="currentBanner(18)"></span>
              <span class="dot bannerDot" onclick="currentBanner(19)"></span>
              <span class="dot bannerDot" onclick="currentBanner(20)"></span>
              <img id="banner-right-arrow" class="right-arrow fade" src="files/images/slideshows/right-arrow.png" width="30px" height="30px" onclick="plusBanner(1)" />
            </div>
          </div>
        </div>
      </div>
      </div>
      <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
      <script src="index.js" type="text/javascript"></script>
      <script src="mobile.js" type="text/javascript"></script>
    </body>
    
    </html>

Answer 1

文件最有可能被缓存。

您可以通过打开检查器F12，进入“网络”标签并正常刷新页面来完成此任务。在大小列中，您将看到文件的大小或类似(From disk cache)的内容。

在本地解决此问题的简单方法是清除设备的缓存。 如果您使用的是Google Chrome浏览器，请打开您的网站并打开检查器F12，然后单击刷新图标，然后选择“清空缓存并重新加载”。

请记住，这只会为您更新页面。如果在您进行更改之前，另一个人也访问过该网站，则他们很有可能也会对该网站进行缓存。

您可以通过编辑.htaccess文件来更改应缓存的文件以及要缓存的时间。这只是告诉访问者浏览器应等待多长时间才能再次获取资源。

示例缓存控制： 如果您编辑媒体查询并将其作为CSS文件发布到您的网站。在访问者第一次访问您的网站/更新其缓存后1个月之前，这将不会在访问者中实时显示。

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##