文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >发布站点后不工作的CSS媒体查询

问发布站点后不工作的CSS媒体查询
EN

Stack Overflow用户
提问于 2018-08-05 14:57:40
回答 1查看 444关注 0票数 0

所以我一直在做一个网站(我的第一批官方网站之一)，我一直在Atom编辑中这样做。我使用一个实时预览包，并使用它构建了整个网站。当我最终把它上传到我想上传的地方时，我使用了一个名为“000webhost”的主机。我上传它并转到URL，但突然我的媒体查询停止工作。这很奇怪，因为出于某种原因，媒体查询中的所有CSS (为移动用户提供大小)都停止工作了。显示用于移动菜单的菜单按钮，以及在移动上使用的背景图像。但是，当我在本地打开文件或在实时预览中打开它时，所有的东西都会显示它在移动和桌面上应该使用的方式。我将将index.html文件和CSS文件一起发布。提前感谢您的帮助！(顺便说一句，我知道有很多关于媒体查询不起作用的帖子，但我已经看过其中至少15篇，没有任何帮助)((请原谅可能是草率的代码))

​

代码语言：javascript
运行
复制
 /* 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%;
      }
    }
代码语言：javascript
运行
复制
<!-- 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>

​

html
css
media-queries
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-05 15:01:34

这些文件很可能是缓存的。

您可以通过打开检查器F12、转到“网络”选项卡并对页面进行正常刷新来验证这一点。在size列中，您将看到文件的大小或类似于(From disk cache)的内容。

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

记住，这只会为您更新页面。如果在您更改之前，另一个人也访问过该站点，那么他们很可能也会缓存该站点。

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

示例缓存-控制:如果编辑媒体查询并将其作为css文件发布到站点。这将不会在你的访问者第一次访问你的网站/他们的缓存被更新后的一个月前“现场”。

代码语言：javascript
运行
复制
## 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 ##
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51695408

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档