So one of the painful bits when you have UI-based management of Media Queries is the computation of what to display in that UI. No, it's not as simple as browsing all your stylesheets and style rules to retrieve only the media attribute of the CSS OM objects... Let's take a very concrete example:

where file foo.css contains the following rules:

@media screen and (max-width: 500px) {
  h1 { color: red; }
}

What are the exact media constraints triggering a red foreground color for h1 elements in such a document? Right, it's screen and (min-width: 200px) and (max-width: 500px)... And to compute that from the inner style rule (theh1 { color: red; } bit), you have to climb up the CSS OM up to the most enclosing stylesheet and intersect the various media queries between that stylesheet and the final style rule:

CSS OM object	applicable medium	applicable min-width	applicable max-width
embedded stylesheet	screen	200px	-
imported stylesheet	screen	200px	750px
@media rule	screen	200px	750px
style rule	screen	200px	500px

It becomes seriously complicated when the various constraints you have to intersect are expressed in different units because, unless you're working with computed values, you really can't intersect. In BlueGriffon, I am working on specified values and it's then a huge burden. In short, dealing with a width Media Query that is not expressed in pixels is just a no-go.

I'd really love to have a CSS OM API doing the work described above for a given arbitrary rule and replying a MediaList. Maybe something for Houdini?

http://www.glazman.org/weblog/dotclear/index.php?post/2016/06/29/Media-Queries-fun-1