css - 在桌面和手机的 CSS 中使用 @media 查询

Question

我正在开发一个响应式网站，它会根据用户浏览器的宽度应用不同的 CSS 样式。

选择的方法是使用 CSS 媒体查询。

我的问题是:当我使用下面的代码时

@media screen
and (min-width: 200px)
and (max-width: 800px)
{
    #example
    {
        background: purple;
    }
}

这在我调整 PC 上的窗口大小时有效，但无法被分辨率在限制范围内的手机识别。

也许更perculiarly，当我使用下面的代码

@media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
    #example
    {
        background: purple;
    }
}

这有相反的效果:在手机上显示，但在 PC 上不显示。

据我所知，“或”运算符没有范围可以使符合以下内容的内容有效

@media screen
and (
        ((min-width: 200px) and (max-width: 800px))

        | / || / OR

        ((min-device-width: 200px) and (max-device-width: 800px))
    )
{
    #example
    {
        background: purple;
    }
}

所以我的问题是:有没有办法同时在桌面和手机上测试响应式 CSS？

我试过很多组合: 使用 @media only screen, 在手机上使用 Android、Firefox 和 Chrome 浏览器， 但无济于事，结果总是一样。

目前我能想到的唯一方法是创建两个单独的样式表，一个用于桌面，一个用于手机，但这意味着每次我想在浏览器中查看更改时更新两个样式表，这是不切实际，与响应性的想法背道而驰。

我研究过使用 orientation: landscape/portrait 目标，但据我所知，这将再次涉及编写两组 CSS。

最后一个考虑因素是该网站目前使用的是纯 CSS；因此此时没有 javascript、用户代理确定或服务器端脚本。

这必须是可能的，因此任何见解都会受到赞赏。我相信有人会遇到同样的问题并启发我。

Answer 1

尝试使用视口(viewport)元标记:

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

将其放入页面的头部。