媒体查询在我手动调整浏览器大小时有效，但在我使用 Chrome 的 'Inspection' 中的 'Responsive' 功能时无效
Media Queries work when I resize my browser manually, but not when I use the 'Responsive' feature in Chrome's 'Inspection'
我正在研究响应式设计。这就是我的@media 断点：
@media (max-width:800px) and (min-width:400px) {
#section {
padding: 0px;
padding-top:100px;
}
.text {
text-align: center;
padding-left: 50px;
width:350px;
}
.headline{
height: 50px;
width: 350px;
text-align: center;
}
.header {
padding-top: 200px;
background-color: lightgrey;
}
.w-70 {
width: 20%;
background-color: blue;
}
.w-15 {
width: 40%;
}
}
@media (max-width: 1100px) and (min-width: 801px) {
.header {
height:350px;
background-color: red;
font-size: 2em;
}
.w-70 {
display: none;
}
.w-15 {
width: 40%;
}
}
当我手动调整浏览器大小以测试 chrome 中的响应能力时，一切正常并且断点对应。当我使用Chrome检查工具中的"Responsive"功能进行测试时，第一个断点：
@media（最大宽度：800px）和（最小宽度：400px）
没有回应。我被告知检查工具是测试响应式设计的更准确的方法，所以我想知道我应该信任哪一个以及为什么一个响应而不是另一个。
我似乎看不出问题出在我的代码中，我尝试了努力刷新并重新启动 chrome 以查看它是否会在 "Inspection" 中工作，但都没有有用。
有谁知道为什么一个在工作而另一个不工作？我应该去哪一个？如果一个有效，另一个不应该有效吗？
任何建议都会有所帮助：我的代码，或者为什么一种测试方法有效而另一种无效。我对编码还很陌生！
我也有标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在我的脑海里，因为我读了一些我应该读的地方，但老实说，我不确定它的作用，或者它是否会对这个问题有任何影响。
提前致谢！！
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
这对我有用（参见 minimum-scale=1）
您尚未发布 HTML 因此我们很难全面了解您的 400 - 800 像素视口问题
但是，我首先要看的是您是否已对#section、.text 和.headline 的宽度（以像素为单位）进行了硬编码。 .text 的 padding-left 也有一个像素宽度。
如果元素对于其父元素而言太宽，则硬编码像素宽度可能会成为问题。
例如，如果视口或屏幕宽度为 400 像素，您的 .w-70 元素将为 20% x 400px = 80px 宽。
您还将 .text 的宽度设置为 350px + 50px padding = 400px。
如果你在 .w-70 中有 .text 它将强制 .w-70 为 400px 宽，而不是 80px
要快速检查这是否是您的问题的原因，请更改您的内部元素的像素宽度
@media (max-width:800px) and (min-width:400px) { ...}
媒体查询相对宽度，例如 100% 或 50%
如果这仍然没有帮助，请发布您的 HTML 将帮助我们解决问题。
祝你好运！
我正在研究响应式设计。这就是我的@media 断点：
@media (max-width:800px) and (min-width:400px) {
#section {
padding: 0px;
padding-top:100px;
}
.text {
text-align: center;
padding-left: 50px;
width:350px;
}
.headline{
height: 50px;
width: 350px;
text-align: center;
}
.header {
padding-top: 200px;
background-color: lightgrey;
}
.w-70 {
width: 20%;
background-color: blue;
}
.w-15 {
width: 40%;
}
}
@media (max-width: 1100px) and (min-width: 801px) {
.header {
height:350px;
background-color: red;
font-size: 2em;
}
.w-70 {
display: none;
}
.w-15 {
width: 40%;
}
}
当我手动调整浏览器大小以测试 chrome 中的响应能力时，一切正常并且断点对应。当我使用Chrome检查工具中的"Responsive"功能进行测试时，第一个断点：
@media（最大宽度：800px）和（最小宽度：400px）
没有回应。我被告知检查工具是测试响应式设计的更准确的方法，所以我想知道我应该信任哪一个以及为什么一个响应而不是另一个。
我似乎看不出问题出在我的代码中，我尝试了努力刷新并重新启动 chrome 以查看它是否会在 "Inspection" 中工作，但都没有有用。
有谁知道为什么一个在工作而另一个不工作？我应该去哪一个？如果一个有效，另一个不应该有效吗？
任何建议都会有所帮助：我的代码，或者为什么一种测试方法有效而另一种无效。我对编码还很陌生！
我也有标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在我的脑海里，因为我读了一些我应该读的地方，但老实说，我不确定它的作用，或者它是否会对这个问题有任何影响。
提前致谢！！
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
这对我有用（参见 minimum-scale=1）
您尚未发布 HTML 因此我们很难全面了解您的 400 - 800 像素视口问题
但是，我首先要看的是您是否已对#section、.text 和.headline 的宽度（以像素为单位）进行了硬编码。 .text 的 padding-left 也有一个像素宽度。
如果元素对于其父元素而言太宽，则硬编码像素宽度可能会成为问题。
例如，如果视口或屏幕宽度为 400 像素，您的 .w-70 元素将为 20% x 400px = 80px 宽。
您还将 .text 的宽度设置为 350px + 50px padding = 400px。
如果你在 .w-70 中有 .text 它将强制 .w-70 为 400px 宽，而不是 80px
要快速检查这是否是您的问题的原因，请更改您的内部元素的像素宽度 @media (max-width:800px) and (min-width:400px) { ...} 媒体查询相对宽度，例如 100% 或 50%
如果这仍然没有帮助，请发布您的 HTML 将帮助我们解决问题。
祝你好运！