Css Media queries using with current div style

Question

Can I use Media queries with current div style maybe like that:

.myDiv {
  anyStyle : ...;

  @media (myDiv's width > 100px) {
    height: 40px;
  }

}

I found several pages,but there said only using window params. if anybody know how to use the media, please tell me about I saw the links:

Actually, your question is an XY problem. Please, explain what is your point here. I mean what are you trying to achieve, really. — matewka
– matewka, Commented Nov 20, 2013 at 12:44
in my case div depends on div's scale, and scale does not relate to window width — Ulug'bek
– Ulug'bek, Commented Nov 20, 2013 at 12:55
Do you mean you want to set the height of the .myDiv relatively to its width? — matewka
– matewka, Commented Nov 20, 2013 at 12:58
I don't get it. The div stays with the same width, right? Then what did you mean by scale in your previous comment? — matewka
– matewka, Commented Nov 20, 2013 at 13:39
Can you not simply set the height constant too? The scale is applied only after the width/height is set, so what is the point in finding out what the width is after the transformation? — Dharman
– Dharman ♦, Commented Nov 20, 2013 at 14:03

Dharman · Accepted Answer · 2013-11-20 12:37:07Z

4

No.

You can't use media queries to check the width of an item on your website. Media queries only check the viewport variables like width and height. You should use them to check what kind of screen your user has and not what style you have applied to your div.

answered Nov 20, 2013 at 12:37

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matewka · Accepted Answer · 2013-11-20 12:41:53Z

2

You should do it that way:

.myDiv {
    /* your styles */
}

@media only screen (min-width: 100px) {
    .myDiv {
        /* other styles */
    }
}

The only way to work with media queries is to rely on device type (screen, print etc.) and/or device width (min-width, max-width).

edited Nov 20, 2013 at 12:41

answered Nov 20, 2013 at 12:34

matewka

10.2k3 gold badges36 silver badges43 bronze badges

3 Comments

Ulug'bek Over a year ago

does min-width mean `myDiv.width' ?

matewka Over a year ago

@UlugbekKomilovich no. It means window width.

Ulug'bek Over a year ago

realy, is there no way how to make it

Collectives™ on Stack Overflow

Css Media queries using with current div style

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related