我希望检测哪些媒体查询处于活动状态 - 我正在使用Bootjack,因此我使用默认断点
我希望能够在下面的示例中使用getComputedStyle()
来获取'content'属性的值 - 但我似乎没有得到正确的语法。我很高兴得到一个元素的价值 - 比如说身体上的字体,但不是伪元素......
这就是我在做的事情:
鉴于此css ..
/* tablets */
@media(min-width:768px){
body::after {
content: 'tablet';
display: none;
}
}
@media(min-width:992px){
body::after {
content: 'desktop';
display: none;
}
}
@media(min-width:1200px){
body::after {
content: 'large-screen';
display: none;
}
}
我在dart文件中有这个:
String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');
但activeMediaQuery始终为空。
我已经尝试过('之后')和(':之后')以及其他任何奇怪而精彩但无济于事的事。
String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');
将变量activeMediaQuery设置为我正在使用的font-family的值(虽然对我来说没什么用处!)
我该怎么办?
答案 0 :(得分:1)
您还可以订阅MediaQuery更改事件
Dart中存在一个错误,解决方法使用dart-js-interop。
这是来自polymer-media-query元素的代码。我不知道评论not suppored in Dart yet
是否仍然有效。我尝试了几个月。
以下是显示如何使用该元素的示例页面。 https://github.com/bwu-dart/polymer_elements/blob/master/example/polymer_media_query.html
var _mqHandler;
var _mq;
init() {
this._mqHandler = queryHandler;
mqueryChanged(null);
if (_mq != null) {
if(context['matchMedia'] != null) {
_mq.callMethod('removeListener', [_mqHandler]);
}
// TODO not supported in Dart yet (#84)
//this._mq.removeListener(this._mqHandler);
}
if (mquery == null || mquery.isEmpty) {
return;
}
if(context['matchMedia'] != null) {
_mq = context.callMethod('matchMedia', ['(${mquery})']);
_mq.callMethod('addListener', [_mqHandler]);
queryHandler(this._mq);
}
// TODO not supported in Dart yet (#84)
// Listener hast to be as MediaQueryListListener but this is and abstract
// class and therefor it's not possible to create a listner
// _mq = window.matchMedia(q);
// _mq.addListener(queryHandler);
// queryHandler(this._mq);
}
void queryHandler(mq) {
queryMatches = mq['matches'];
//fire('polymer-mediachange', detail: mq);
}
这对我使用你在问题中提供的CSS很有用,但只有当窗口宽度超过768像素时。您可能会错过max-width: 768px
import 'dart:html' as dom;
void main () {
dom.window.onResize.listen((e) {
var gcs = dom.document.body.getComputedStyle('::after');
print(gcs.content);
});
}