[英]Media Queries in javascript
我想知道如何编写这些值:
@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 ) {
}
我不相信像这样的媒体查询可作为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(带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();
}
}
有点骇客,但行得通。 我将这些代码的变体用于响应式设计。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.