1

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@element '.div1' and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@element '.div1' and (min-width: 600px) {
  .div1 {
    background: red;
  }
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
<div class="div1">Click and drag until larger than 300px ➷</div>

It is not working in Dot Net. It is working only HTML Page. A question is that Can media queries resize based on a div element instead of the screen?

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Anu
  • 121
  • 2
  • 9
  • please read this https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – andrew s zachary Feb 01 '18 at 07:36
  • I do not think that media queries can do this. However, javascript/jQuery may do the trick. – Kloker Feb 01 '18 at 07:42
  • I'm kinda worried about your remark "It is not working in Dot Net". In what way? How would this snippet not work if it was the output of an ASP.NET web app? That is, you do mean ASP.NET, right? – Mr Lister Feb 01 '18 at 08:05
  • I suggest you to read this answer, it seems to do its job : https://stackoverflow.com/a/16879505 – BENARD Patrick Feb 01 '18 at 09:01

1 Answers1

1

In ordinary CSS: What you want is not possible but you don't need that. You already have the answer. Use the css media queries but only define the classes that need changes in the particular width limits. As below.

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@media and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@media and (min-width: 600px) {
  .div1 {
    background: red;
  }
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
<div class="div1">Click and drag until larger than 300px ➷</div>

However if you look at the documentation of EQCSS, you can do this

@element .minwidthpixels and (min-width: 500px) {
  .minwidthpixels {
    background: gold;
  }
}

so the code would be:

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@element .div1 and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@element .div1 and (min-width: 600px) {
  .div1 {
    background: red;
  }
}
omukiguy
  • 1,401
  • 3
  • 17
  • 36