html - 站点发布后 CSS 媒体查询不起作用-6ren

html - 站点发布后 CSS 媒体查询不起作用

转载作者：行者123 更新时间：2023-11-28 15:10:25

所以我一直在一个网站上工作(我的第一个官方网站之一)并且我一直在 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>

最佳答案

文件很可能已缓存。

您可以通过打开检查器 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 ##

关于html - 站点发布后 CSS 媒体查询不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51695408/

文章推荐： html - CSS first-of-type 和 last-of-type 不起作用

文章推荐： javascript - 如何使用Javascript更改href和html文本？

文章推荐： javascript - 如何在单击按钮时更改 div 背景颜色？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 站点发布后 CSS 媒体查询不起作用