6

我见过很多在桌面浏览器和手机浏览器上都有响应的网站，我正在开发一个网站，并且我有以下样式表设置：（如果您需要，希克斯设计网站是我想要实现的一个很好的例子)

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

然而，我上面的样式表似乎只适用于桌面浏览器。（使用 Android Firefox 和 Sony Xperia Ray 上的默认 Android 浏览器进行测试）

希克斯设计网站的规则与我的非常相似，但是它们使用了最小值和最大值，但对我来说，似乎两者都不适用于移动和桌面浏览器。（我计划更多地优化我的媒体查询，我只是想让基础知识能够按照我现在想要的方式运行）。

如果我使用 max-device-width 而不是 max-width 它会在移动浏览器上响应，而不是桌面浏览器...

我尝试了以下方法来解决这个问题：

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

还：

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

但是，我认为这些都不正确，因为 Firefox 的 Web 开发人员工具栏抱怨它。我还尝试了上述规则的一些变体，但仍然无法使其正常工作。

据我了解， max-width 读取视口宽度（例如……浏览器窗口的宽度），而 max-device-width 读取您用于查看站点的屏幕的实际宽度。- 我很困惑为什么 max-width 似乎没有读取移动设备的浏览器宽度。

我想我可能在这里遗漏了一些关于媒体查询的明显内容......如果我希望我的网站在桌面和移动浏览器上响应，我必须复制所有媒体查询并进行更改，这似乎没有意义从“屏幕和（最大宽度）”到“屏幕和（最大设备宽度）”的查询，反之亦然。（我什至羞于在这里输入作为解决方法）

如何结合 (max-width) 和 (max-device-width) 规则或如何实现这一点？

如果您不想阅读以上所有内容：

我正在使用@media screen and (max-width:480px) 但是似乎只有@media screen and (max-device-width:480px) 可以在手机上使用。我如何结合这两个规则来实现移动和桌面浏览器上的响应式设计？

4

2 回答 2

8

那里有很多媒体，如果您只想通过其属性进行选择，请使用all关键字：

@media all and (max-width:480px)
{
    /* Styles */
}

编辑：

将规则与 or 结合：

@media all and (prop1:val1), all and (prop2:val2)
{
    /* Styles */
}

将规则与 and 结合：

@media all and (prop1:val1) and (prop2:val2)
{
    /* Styles */
}
于 2012-10-23T12:26:46.197 回答
3 
@media screen and (min-width:240px) and (max-width:480px), 
   screen and (min-device-width:240px) and (max-device-width:480px)
{
     /* Styles */
}

解决了这个问题，以前的答案帮助我投了赞成票。谢谢。

于 2012-10-23T14:07:38.773 回答