在使用媒体查询时,我似乎遇到了与许多其他人相反的问题:当我调整浏览器大小时,我似乎无法让不同的查询生效。但当我在iphone上访问网页时,它运行良好。
http://dknytkom.dk/forside/
我通过在主容器中添加背景色来测试它,但颜色变化只发生在实际的iPhone上,而不是浏览器本身。例如,我写过:
在我的grid2.ccs的顶部,我已经将主容器的bg颜色设置为蓝色。再往下我写:
@media only screen (min-width : 768px) and (max-width : 1254px) {
body, #main-container { background-color:pink;}
}
再往下走:
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {body, #main-container { background-color:yellow;}
颜色确实发生了变化——但只有我的设备(iPhone),而不是在浏览器上调整大小。
注意:也许这条线索是关于某件事的:媒体查询-移动与桌面浏览器
"如果我使用最大设备宽度而不是最大宽度,它会在移动浏览器上响应,但不会在桌面浏览器上响应…"
是的-事实证明,浏览器中没有发生更改的原因是我为最小设备宽度和最大设备宽度指定了css。
仅使用最小宽度和最大宽度