Question

我在CSS.file中添加了一些媒体查询，以使网页具有响应性，并且离线时效果很好。但是，当我使用Filezilla将其上传到服务器上时，它似乎不再具有响应能力。

我已经尝试在@media only screen and (...)中更改@media (...)。

@media only screen and (max-width: 2000px) {
    .column_left {
        width: 100%;
        height: auto;
    }
    .column_right {
        width: 100%;
        height: auto;
    }
    .foto {
        width: 150px;
        height: 75px;
    }
    footer {
        background-color: lightgreen;
    }
}

@media only screen and (max-width: 1000px) {
    .title {
        margin: 10px;
    }
    .subtitle {
        display: none;
    }
}

@media only screen and (min-width: 2500px) {
    .foto {
        width: 150px;
        height: 75px;
    }
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stay Culture</title>
    <link rel="stylesheet" type="text/css" href="stile.css">
    <link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
</head>

Answer 1

这可能是cache的问题。

您可以运行Ctrl+Shift+R或Ctrl+F5从当前打开的页面中删除缓存。

为避免使用旧的缓存文件，您只需在末尾添加“版本”标签即可。像这样：

<link rel="stylesheet" type="text/css" href="stile.css?v=001">

此“强制”文件将重新加载，因此建议对该文件进行任何更改，因为用户不会在您的页面上运行Ctrl+F5。

为什么网页在笔记本电脑中离线显示响应，而使用Filezilla上传时却不再显示？

1 个答案: