我想知道如何写这些值:
@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px)
这样我就可以编写if子句,除了上面的值:
if (window.screenWidth >=550 || window.screenWidth >=550 ) {
}
答案 0 :(得分:0)
我不相信像这些媒体查询可用作JS window
属性,尽管可能有插件来处理这些查询。
一种解决方案是使用CSS中的普通查询来设置一个特定方式的任意元素,只需通过javascript检测即可。
CSS:
@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px) {
head { font-family: 'someValue'; }
}
JS(w / jQuery):
$(function() {
var foo = $('head').css('fontFamily').split("\"").join("").split("'").join(""); // split/joins needed for cross-browser compatibility
if(foo === 'someValue') {
doStuff();
} else if(foo === 'someOtherValue') {
doOtherStuff();
}
}
有点黑客,但它有效。我使用该代码的变体来进行响应式设计。