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

希克斯设计网站的规则与我的非常相似，但是它们使用了min和max，但对我来说似乎并不适用于移动和桌面浏览器。（我计划更多地优化我的媒体查询，我只是试图让基本功能正常运行，因为我现在想要它们。）

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

我想我可能在这里遗漏了一些关于媒体查询的明显内容......如果我希望我的网站能够在桌面和移动浏览器上做出响应，那么我必须复制所有媒体查询似乎没有意义只需将查询从'screen and（max-width）'更改为'screen and（max-device-width）'，反之亦然。（我甚至羞于在这里输入解决方法）

如何组合（最大宽度）和（最大设备宽度）规则或如何实现此目标？

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

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

Answer 1

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

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

修改：

将规则与or结合使用：

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

将规则与和：
结合使用
@media all and (prop1:val1) and (prop2:val2) { /* Styles */ }

Answer 2

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

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

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

2 个答案: