0

我正在开发一个响应式网站，根据用户浏览器的宽度应用不同的 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、用户代理确定或服务器端脚本。

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

4

1 回答 1

2

尝试使用视口元标记：

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

将其放入页面的头部。

于 2013-10-08T16:21:40.630 回答