我见过许多网站在桌面浏览器和手机浏览器上都有响应,我正在网站上工作,我有以下样式表设置:(希克斯设计网站是我想要实现的一个很好的例子,如果你需要一个)
/* 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屏幕和(最大宽度：480px)但是它似乎只有@media屏幕和(max-device-width：480px)适用于手机.如何结合这两个规则在移动和桌面浏览器上实现响应式设计？
解决方法
有很多媒体,如果你只想通过它的属性选择,使用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 */
}
