CODEWITHSUNDEEP
jquerycss
Michael Schwartz
Michael Schwartz

Reputation: 8415

css3 @media only selector

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");
  }
});

Upvotes: 1

Views: 58

Answers (1)

knitevision
knitevision

Reputation: 3143

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" />

Upvotes: 1

Related Questions