媒体查询使网站响应.但它不会'只有当我拖动我的浏览器

Question

我有一个网站，是完全响应所有设备。当我在chrome上测试devtools的响应性时，所有的断点和UI都工作得很好。但是当我不在devtools中，我只是拖拽我的浏览器宽度时，断点不会触发。

这可能看起来没什么大不了的，但是当招聘人员测试网站响应性时，我不认为他们会使用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

根据这个问题，max-device-width是固定的，不管你如何调整你的窗口大小。当你使用devtools来模拟较小的尺寸时，它会发送其模拟的设备信息，因此它是工作的。