sass 媒体查询 min-width 的意外行为答案

【问题标题】：sass media query unexpected behavior for min-widthsass 媒体查询 min-width 的意外行为
【发布时间】：2017-01-24 11:38:21
【问题描述】：

我正在使用媒体查询来更改我网站上某些文本的字体大小。但是，据我了解，它不起作用。

p {
font-size: 3rem;
@media (min-width: 768px) {
    font-size: 2rem;
}
@media (min-width: 992px) {
    font-size: 1.5rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}

目前 min-width: 768px 适用于 992px 以下的所有内容。例如，在 440px 宽度下，它的字体大小仍然为 2rem。从未使用过 3rem 字体大小。需要注意的一件有趣的事情是，这只发生在 Chrome 响应式设备测试器中。如果我使实际的窗口变小，那么它就可以工作。

【问题讨论】：

标签： css responsive-design sass media-queries

【解决方案1】：

由于您首先使用移动设备（使用min-width），因此您应该首先应用最小尺寸。尝试：

p {
font-size: 1.5rem;
@media (min-width: 768px) {
    font-size: 2rem;
}
@media (min-width: 992px) {
    font-size: 3rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}

【讨论】：

哦，你是对的！我在想它有点倒退谢谢。

【解决方案2】：

确保在您的 <head> 中包含此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

这意味着浏览器将（可能）以自己屏幕的宽度呈现页面的宽度。因此，如果该屏幕为 320 像素宽，则浏览器窗口将为 320 像素宽，而不是缩小并显示 960 像素（或该设备默认执行的任何操作，以代替响应式元标记）。

来源：Css tricks

【讨论】：

谢谢！这解决了我的问题。我以前没见过那个元标签。这对大多数网站来说是常见的吗？
在制作响应式页面布局时很常见。有了这个，浏览器窗口的大小与屏幕一样宽。它在bootstrap basic template
好的。感谢您的帮助！