Can I set the "open" attribute on the HTML5 <details> responsively?

Question

I'm refactoring my site to use the HTML5 details tag, as described here, in order to improve accessibility.

This is my question: I know that I can add the "open" attribute to the details tag to ensure that the contents are displayed by default:

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

But is there a way I can set this responsively in CSS, so that the open attribute is automatically applied for pages with a width greater than 640px, and automatically removed for pages with a width below 640px?

Update: To be clear, I know I can do it with other CSS styling. I'm interested in understanding whether it's possible to do this with only the open attribute.

Answer 1

This isn't possible using pure responsive styling and only the open attribute.

But you can use media queries and other CSS styling to hide the element when the screen has the width you want. See: http://css-tricks.com/logic-in-media-queries/