Question

我正在使用谷歌浏览器，在我的CSS（SCSS）文件中，我将媒体查询应用于mixin中，如下所示：

@mixin render-d {
    @media only screen and (min-width: 768px), screen and (min-width: 481px) and (orientation: portrait), screen and (orientation: landscape), print {
        @content;
    }
};

以上媒体查询的mixin允许我这样做：

.column {
    width: 100%;

    @include render-d {
        width: 50%;
    }
}

我想通过上面的示例中的媒体查询实现的目标（期望的效果）：

如果min-width大于768px，则应用width: 50%
如果min-width大于481px，则只有在方向为纵向时才应用width: 50%
，然后应用width: 50%
如果打印则应用width: 50%
其他任何内容都适用width: 100%

我的问题：

当我使用Google Chrome检查器（开发人员工具）和内置设备工具栏（您可以测试任何设备和响应能力）时，可以看到仅所需的效果。当我逃离Chrome开发人员工具并尝试调整浏览器窗口的大小以使其更窄时，它不起作用。

我做错了什么？

重要说明：我还必须将此行添加到我的HTML文件中，以使其仅适用于Google Chrome检查器：

<meta id="viewport" name="viewport" content="width=device-width" />

为什么我的媒体查询结果应用于CSS文件只能在浏览器检查器中看到？

0 个答案: