VSC、实时服务器和媒体查询的问题

Question

我的媒体查询根本不起作用，所以我创建了最简单的测试来显示我的问题。但它在这里与代码片段一起工作......但不是在本地与 VSC ...... 为什么？我该如何解决？

body{
    background-color: aqua;
}

@media screen and (min-width: 480px) {
    body {
      background-color: lightgreen;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Answer 1

当我在 Chrome 的设备工具栏中检查时，代码似乎可以正常工作。在开发工具 (f12) 中尝试。 Chrome 文档：https://developer.chrome.com/docs/devtools/device-mode/

当您尝试缩小 window 时，最新浏览器的宽度不会小于 500 像素。这就是为什么您在视频中看不到蓝色的原因。如果您仍想尝试使用浏览器宽度，请尝试将 480px 更改为 600px。届时您将能够看到媒体查询工作。

VSC、实时服务器和媒体查询的问题

Problem with VSC , live server and media queries

css

media-queries

visual-studio-code