媒体查询使网站响应。但它不仅在我拖动浏览器时

Question

我有一个完全响应所有设备的网站。当我在 chrome 上的 devtools 中测试响应能力时，所有断点和 UI 都运行良好。但是当我不在 devtools 中并且我只是拖动我的浏览器宽度时，断点不会触发。

这似乎没什么大不了的，但是当招聘人员测试网站响应能力时，我认为他们不会调出开发工具来进行测试。我认为他们只是非全屏浏览器并拖动它的一侧来调整响应测试的宽度。我将 React 与 SCSS 结合使用，并且仅在 SCSS 文件中使用媒体查询来提高响应能力。没有钩子。

以下是我的媒体查询的一些示例。

//
@media only screen 
and (min-device-width: 813px) 
and (max-device-width: 1080px) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-tablet;

                .link,
                a {
                    font-size: $fsLandingText-tablet;
                }
            }
        }
    }
}

// Phone portrait
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 812px) 
and(orientation: portrait) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-phone;
                .link,
                a {
                    font-size: $fsLandingText-phone;
                }
            }
        }

        .line {
            display: none;
        }
    }
}

感谢您的宝贵时间。

Answer 1

在媒体查询中使用 min-width 和 max-width。

根据 This question，max-device-width 是固定的，无论您如何调整 window 的大小都没有关系。当您使用 devtools 模拟较小的尺寸时，它会发送其模拟设备信息，因此它可以正常工作。

媒体查询使网站响应。但它不仅在我拖动浏览器时

Media queries makes website responsive. But it doesn't only when I am dragging my browser

css

user-interface

sass

media-queries

responsive-design