Question

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

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

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

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

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

当我使用以下代码

时，可能更为奇特

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

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

据我所知，“OR”运算符的范围不适用于以下行中的某些内容有效

@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

尝试使用视口元标记：

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

将其放入页面的头部。

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

1 个答案: