我设置了一个登陆页面，非常简单地在屏幕中间显示一些文本。我用flex。当我尝试一些改变时，我注意到我所做的改变将不适用于我的浏览器，除非我清除浏览器数据(历史记录，cookie等)。我尝试了chrome、火狐和安卓网络。在所有浏览器中都是一样的，只要我清除了数据，登陆页面就会显示更新的内容。但这只会发生在改变的css上。当我改变html，我将有在页面上立即更新。在桌面和移动设备上都是如此。
有谁知道这是为什么以及如何避免它吗?我在下面展示了以下代码:
<!DOCTYPE html>
<html>
<head>
<title>Landing page</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="flex-container">
<div class="items style"><h1>My<strong>TEXT</strong></h1>
<p>Business type | email@email.com </p></div>
</div>
</body>
</html>
Style.css
body{
overflow: hidden;
background: black;
}
.flex-container{
display: flex;
background-color: black;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
min-height: 100vh;
}
.style{
font-family: 'Poppins', sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFFFFF;
}
@media screen and (min-width: 800px){
.flex-container > div {
background-color: black;
margin: 20px;
padding: 20px;
font-size: 220%;
color: white;
border: thin solid white;
text-align: center;
border-radius: 5px;
}
}
@media screen and (max-width: 799px){
.items{
flex: 100%;
align-items: center;
}
}
您可以为该css文件附加一个版本号。这将迫使浏览器加载更新后的CSS文件，而不是使用缓存的文件。尝试以下语法:
<link rel="stylesheet" href="style.css?v1"/>
不错的方法。但是没有成功。它只是一个简单的登陆页面，就像其他html页面一样。为什么我的电脑会出现这个问题?这和flex有关吗?