我的CSS没有改变,为什么?

时间:2018-06-11 17:04:42

标签: html css caching web frontend

所以很多个星期后,我又回到了编码状态,我遇到了问题。

我正在研究的项目包含PHP网站的基本内容,现在我正在尝试重新设计我的主页。

问题是,每当我删除或更改CSS中的某些内容时,设计永远不会像冻结或某种东西一样发生变化,而且每个页面都会发生变化。当我删除HTML中CSS的链接时,设计就消失了。这是代码:

var scrolled=0;
    $(document).ready(function() {
        $("#master").click(function() {
            $("#holder").slideToggle('slow');
        });
                
        $("#down").on("click" ,function() {
            scrolled=scrolled+300;
            $("#solut").animate({
                scrollTop: scrolled
            });
        });
    });
@font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
      src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
        overflow-x: hidden;
    }
    .navbar {
        width: 100%;
        height: 60px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="assets/logo.png" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
        <center>
          //code goes here: bunch of divs and texts
        </center>
    </body>
    </html>

2 个答案:

答案 0 :(得分:1)

在没有简短指南自述文件基本自动化任务列表的情况下返回旧项目可能会导致运行和测试网站时有几个不必要的副作用。

以下是我从头到尾遇到过的一些内容:

  • 浏览器缓存:在Chrome中打开DevTools,然后点击清空缓存和硬重新加载 (Ctrl + Shift + F5)<重新加载页面< / em>的。如果它没有用,请给你的CSS命名如下:(more on cache-bursting): <link href="css/index.css?v=1.0.1" rel="stylesheet" />

  • 框架缓存:如果您使用带有资源缓存的框架,请删除/清空它。这取决于您使用的框架,如果有的话。

  • CSS Transpiler无法运行:如果您使用某些转发器(SASSLESS等),有时会忘记运行转换。< / p>

  • 在移动设备上进行测试:他们可以经常进行缓存,只需在开发过程中使用缓存突发。

  • 错误的路径/无法访问文件:检查 webserver logs 以查明错误。

  • 非真正编辑文件:如果您更喜欢IDE(例如:IntelliJ IDEA;)),并且在编辑特定文件时保存,然后上传(例如:通过FTP),可能会发生特定文件无法更新。的 More on this

答案 1 :(得分:0)

这可能是一个缓存问题。但你有没有仔细检查你的开发人员工具,看看CSS是否继续?有时我会错误地将文件链接错误 - 忘记返回文件夹“../ css / index.css