媒体查询-移动与桌面浏览器

Question

我已经看到许多网站都可以在桌面浏览器和手机浏览器上做出响应，我正在一个网站上工作，并且设置了以下样式表： ）

/* 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浏览器进行了测试）

希克斯（Hicks）设计html" target="_blank">网站的规则与我的非常相似，但是它们使用了最小值和最大值，但对我来说似乎都不适用于移动和桌面浏览器。（我计划进一步优化媒体查询，我只是想让这些基本功能按我现在的意愿运行）。

如果我使用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似乎无法读取移动设备的浏览器宽度。

我想我可能在这里缺少有关媒体查询的明显信息……如果我想让我的网站在台式机和移动浏览器上响应，那么我必须复制所有媒体查询并进行更改，这似乎没有任何意义。从“屏幕和（最大宽度）”到“屏幕和（最大设备宽度）”的查询，反之亦然。（我很to愧在这里输入作为解决方法）

如何合并（max-width）和（max-device-width）规则，或者如何实现？

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

我正在使用@media屏幕和（max-width：480px），但是似乎只有@media屏幕和（max-device-
width：480px）可在手机上使用。如何结合这两个规则在移动和桌面浏览器上实现响应式设计？

Answer 1

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

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

编辑 ：

将规则与或结合：

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

将规则与和结合使用：

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