如何修复css中的媒体查询？答案

【问题标题】：How to fix media queries in css?如何修复css中的媒体查询？
【发布时间】：2021-02-04 20:47:34
【问题描述】：

我需要创建网站的桌面版和移动版。我决定在 CSS 中使用媒体查询。但是当我对它们进行编码时，我发现它们不起作用并且我不知道如何修复它们。为了解决这个问题，我去了 Youtube 找到了这个例子，但我发现媒体查询不起作用。然后我去stack，发现了一个类似的问题。在这种情况下，通过在头部添加元标记来修复它。我这样做了，但这对我没有帮助。它不适用于 chrome 和 Mozilla。

body{
    color:red;
}

@media screen and (max-width: 600){
    body{
        color: blue;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>The car dealer site</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">

</head>
<body>
    <h1>Title</h1><br>
    <h2>Subtitle</h2>
</body>
</html>

【问题讨论】：

标签： html css google-chrome media-queries

【解决方案1】：

您需要为您的 max-width 属性指定单位。换行

@media screen and (max-width: 600){

到

@media screen and (max-width: 600px){

再试一次

【讨论】：