今天使用EQCSS编写元素查询

元素查询：响应式设计超出了视口限制

>本文探讨了元素查询，这是一种强大的技术，将响应式设计功能扩展到传统媒体查询之外。 与对视口维度做出反应的媒体查询不同，元素查询允许基于单个元素属性（例如宽度，角色计数或滚动位置）进行样式。 这种增强的响应能力对于创建可重复使用的组件和处理动态布局特别有益。

本文由Adrian Sandu，Giulio Mainardi和Tom Hodgins进行了同行评审。 感谢SitePoint的同行评审的贡献。 元素查询的关键优点：

>

组件级的响应能力：

样式元素基于其内在属性，而不仅仅是视口大小。 无论整体屏幕尺寸如何

• 可重复使用的组件：创建无缝适应不同上下文和父容器的组件，改善代码可重复使用性和可维护性。
>动态布局：
• 添加或删除元素的处理情况会影响现有元素的可用空间，并保持最佳呈现。
为什么使用元素查询？
• >元素查询地址媒体查询的局限性在各个元素属性而不是视口维度的情况下，决定了样式需求。 考虑以下示例：

添加列：添加侧边栏会减少现有列的空间。 媒体查询不会调整，但是元素查询可以完美地调整图像和文本的大小。

响应式窗口小部件：

嵌入在不同宽度的容器中的小部件需要基于容器的大小而不是视口的造型。元素查询提供此上下文感知的样式。

• 独立的组件样式：>创建组件（例如，导航栏，表格），无论周围的元素的尺寸或页面布局如何，都可以保持其预期的外观。
• >引入eqcss：
> eqcss.js是一个JavaScript库，在包括IE9在内的现代浏览器中启用了元素查询实现。它的语法反映了媒体查询，简化了采用。 虽然强大，但要注意表现；过度使用会影响响应能力，尤其是在Firefox和Edge中。 EQCSS：

1. 包括eqcss.js：添加eqcss.js文件（可通过cdnjs或github提供）到您的HTML中。 对于IE8的支持，包括必要的polyfill。

2. >写入元素查询：使用@element指令，然后是选择器和条件，类似于媒体查询。

   <code class="language-css">@element ".content" and (max-width: 480px) {
     .content img {
       width: 100%;
     }
   }</code>

3. 重新计算样式： eqcss自动重新计算样式调整和滚动，但是您可以使用>用于其他事件手动触发重新计算。EQCSS.apply()>

高级功能：

• >元选择器：>使用，$this，$parent，$prev和$next分别针对元素本身，其父，上一个兄弟姐妹或下一个兄弟姐妹。 >

• 字符计数：样式元素基于其角色计数（例如，为长标题调整字体尺寸）。

性能考虑：

> eqcss依赖于JavaScript，因此性能取决于元素和查询的数量。 避免过度使用，尤其是在性能敏感区域。 未来的浏览器功能，例如ResizeObserver和Houdini承诺性能改进。

结论： > EQCSS赋予开发人员创建适合内容大小和上下文的高度响应式设计。尽管存在性能考虑，但其直观的语法和强大的功能使其成为增强响应式设计工作流的宝贵工具。 记住要明智地使用它并进行彻底测试。

>

常见问题（常见问题解答）：

（省略了本节，但原始文本提供了可以在此处轻松合并的全面常见问题。）

以上是今天使用EQCSS编写元素查询的详细内容。更多信息请关注PHP中文网其他相关文章！