Question

我刚检查了element queries概念，看起来非常有趣。我想在我面前的新响应项目中使用这个概念。我在几台设备上测试了这个，但你永远无法确定。

我想知道是否有人使用过它并且有真正的性能体验。

我的项目将涵盖IE9 +，现代浏览器的最新版本（FF，CH，SA，OP），ipad（Last IOS），iphone（Last IOS）和android 4.1 +。

这样安全吗？有关其表现的任何问题吗？

Answer 1

正如所承诺的那样，我发布了一个更高效的元素查询问题解决方案。使用下面的设置，您可以对任何元素进行元素查询。此解决方案使完整的Media Query API可用于各个元素。您需要在此处获取脚本/样式包：http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/ - 该帖子还包含完整深度（我建议您在使用前阅读）用于完成它的机制，以及另一个实现选项。

以下是您要使用的标记/语法，请注意media=""属性：

<强> HTML

<section media="query(small-width, (max-wodth: 300px))">

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

</section>

当查询匹配时，查询ID将显示在matched-media=""属性中 - 您将使用它来定位相应查询的样式：

<强> CSS

section[matched-media~="small-width"] {
  font-size: 50%; /* small text for a wee lil element! */
}

/* Multiple matches example: */

section[matched-media~="small-width medium-height"] {
  ...
}

元素查询全局性能

1 个答案: