使用开发工具和响应选项，媒体采石场不会在小屏幕上发生变化

Question

我已经这样做了 1000 次并且一直使用

media quarries

。在 6 个月没有编程之后，我开始了一个新项目，我正在开发一个新项目，该项目逐渐创建一个网页。我正在为我的页面设置一些基本基础设施（我没有使用任何框架。完整的自定义网页），并且我在谷歌行业标准媒体采石场断点上搜索了响应式设计，当我搜索我的值时得到了以前用过。

出于什么天杀的原因，当我使用工具中的响应选项来告诉某些手机分辨率时，它只是不想低于笔记本电脑媒体采石场的大小。当我重新调整浏览器窗口大小时，它就可以工作了。

我使用 VSCode 和 Live 服务器扩展。 我的浏览器是 OperaGX，但在 Chrome / Edge 上进行了测试，出现了同样的问题。 系统：Windows 10。 实时服务器仅打开 html 文件。

/* Extra Small Devices (Phones) */
@media only screen and (max-width: 576px) {}

/* Small Devices (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {}

/* Medium Devices (Laptops) */
@media only screen and (min-width: 769px) and (max-width: 992px) {}

/* Large Devices (Desktops) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {}

/* Extra Large Devices (Large Desktops) */
@media only screen and (min-width: 1201px) {}

Answer 1

只是为了说明您的媒体查询工作正常。问题不在于他们。

div {
    width: 100px;
    height: 100px
    }
/* Extra Small Devices (Phones) */
    @media only screen and (max-width: 576px) {div {background:red}}

/* Small Devices (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {div {background:green}}

/* Medium Devices (Laptops) */
@media only screen and (min-width: 769px) and (max-width: 992px) {div {background:yellow}}

/* Large Devices (Desktops) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {div {background:blue}}

/* Extra Large Devices (Large Desktops) */
@media only screen and (min-width: 1201px) {div {background:pink}}

<div>div</div>