我可以响应地在HTML5 <details>上设置“open”属性吗？</details>

Question

我正在重构我的网站以使用HTML5 details代码as described here，以便改善可访问性。

这是我的问题：我知道我可以将"open"属性添加到details标记，以确保默认显示内容：

<details open>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

但是有没有办法可以在CSS中响应性地设置它，以便open属性自动应用于宽度大于640px的页面，并自动删除用于页面宽度低于640px？

更新：要明确，我知道我可以使用其他CSS样式。我有兴趣了解是否可以仅使用open属性执行此操作。

Answer 1

使用纯响应样式并且仅使用open属性，这是不可能的。

但是当屏幕具有您想要的宽度时，您可以使用媒体查询和其他CSS样式来隐藏元素。请参阅：http://css-tricks.com/logic-in-media-queries/