2

我希望检测哪些媒体查询处于活动状态 - 我正在使用 Bootjack，因此我使用的是默认断点

我希望能够getComputedStyle()在下面的示例中使用来获取“内容”属性的值 - 但我似乎没有得到正确的语法。我可以很高兴地获得一个元素的值——比如 body 上的 font-famly，而不是伪元素......

这就是我正在做的事情：

鉴于这个 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;
    }
 }

我的飞镖文件中有这个：

String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');

但 activeMediaQuery 始终为空。

我尝试过 ('after') 和 (':after') 以及其他任何奇怪而美妙的东西，但无济于事。

String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');

将变量 activeMediaQuery 设置为我正在使用的字体系列的值（不过对我来说没多大用处！）

我应该做什么？

4

1 回答 1

1

您还可以订阅 MediaQuery 更改事件

有关更多详细信息，请参见https://github.com/bwu-dart/polymer_elements/blob/master/lib/polymer_media_query/polymer_media_query.dart

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);
  });
}
于 2014-05-26T15:54:16.243 回答