css3 @media only selector

Question

I've only used media queries to handle the document.width.

However I'm working on a web design app and I was wondering is it possible to use media queries to detect if an elements width is say 769px.

Here's an example...

@media only #dynamic-storage (min-width: 769px) {
  .is-displayed-mobile {
    display: none;
  }
}

I'm wondering if there's pure CSS solution using media queries or would I have to do the following in JQuery instead.

$(window).on("load resize", function() {
  if ( $("#dynamic-storage").width() > 768 ) {
    $("link[href=\"assets/polyui-small.css\"]").attr("href","assets/polyui.css");
  } else if ( $("#dynamic-storage").width() < 768 ) {
    $("link[href=\"assets/polyui.css\"]").attr("href","assets/polyui-small.css");
  }
});

thats not a duplicate imo. I believe ``#dynamic-storage`` is just taking same width as ``body`` and he needs to include stylesheets depending on the width. Linked 'duplicate' doesn't answer that. — knitevision, Jan 25 '15 at 22:07

score 1 · Accepted Answer · answered Jan 25 '15 at 23:52

1

This is what you are looking for

 <link rel="stylesheet" media="screen and (min-width: 768px)" href="polyui.css" />


 <link rel="stylesheet" media="screen and (max-width: 768px)" href="polyui-small.css" />

answered Jan 25 '15 at 23:52

knitevision

3,023
6
29
44

This won't work as `#dynamic-storage's width is -400px` from the main browser's width. After some more research I later found that what I want to do is not possible with CSS alone as media queries are made to handle a device's browser or document/window with. http://www.w3.org/TR/css3-mediaqueries/ However I will accept the answer and thank you for your time and consideration. – Michael Schwartz Jan 26 '15 at 04:21

css3 @media only selector

1 Answers1