元素查询全局性能

Question

我刚刚查了element queries这个概念，看起来很有趣。我想在我面前的一个新的响应式项目中使用这个概念。我已经在几台设备上对此进行了测试，但你永远无法确定。

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

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

使用安全吗？它的性能有什么问题吗？

Further explanation of element queries

Answer 1

正如所承诺的，我将发布一个针对元素查询问题的更高效的解决方案。使用下面的设置，您可以对任何元素进行元素查询。该解决方案使完整的媒体查询 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"] {
  ...
}