VSC，实时服务器和媒体查询的问题
我的媒体查询根本无法使用，因此我创建了最简单的测试来显示我的问题。 但是它在这里使用片段的工作...但不是在本地使用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>My media queries wont work at all so I create the most simple test to show up my issue.
but its work here with the snippet ... but not locally with VSC ...
Why ? and how can I resolve it ?
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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当我在Chrome的设备工具栏中检查时，代码似乎正常工作。在开发工具（F12）中尝试一下。
Chrome documentation : https://developer.chrome.com/docs/devtools/device-模式/
当您尝试使窗口较小时，最新浏览器的宽度不到500px。这就是为什么您在视频中看不到蓝色的原因。如果您仍然想尝试使用浏览器宽度，请尝试将480px更改为600px。然后，您将可以看到媒体查询工作。
The code seems to work correctly when I check it in Device Tool Bar of Chrome. Try it in dev tools(f12).
Chrome documentation : https://developer.chrome.com/docs/devtools/device-mode/
Latest browsers don't go less than 500px in width when you try to make the window smaller. That is the reason why you dont see blue in your video. If you still want to try using the browser width, try changing 480px to 600px. You will be able to see the Media Queries working then.