在CSS中为桌面和电话使用@media查询

我正在开发一个网站，这将是在不同的CSS风格的应用取决于用户的浏览器的宽度响应

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

我的问题是：当我使用以下代码时

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

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

当我在电脑上调整窗口大小时，这项功能会起作用，但分辨率在限制范围内的手机无法识别

也许更直观地说，当我使用以下代码时

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

@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

我尝试过很多组合： 使用

@仅媒体屏幕

， 在手机上使用Android、Firefox和Chrome浏览器， 但结果总是一样的，这是徒劳的

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

我研究了使用

方向：横向/纵向

目标，但据我所知，这将再次涉及编写两组CSS

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

---

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

尝试使用视口元标记：

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

将其放在页面的标题部分。

可能重复的