move from JQuery to CSS3

2

Any way to do this in CSS3?

if(window.innerWidth <= 1000) {
  var ecra = window.innerWidth;
  $(".topo").css("height",ecra*0.293);
}

I tried

@media screen and (min-width: 0px) and (max-width:1000px) {
  .topo {
    height: calc(device-width*0.293);
}

But I can not find the size of the screen with css

    
asked by anonymous 18.10.2016 / 15:14

1 answer

4

Yes, you have this:

Using the height property the unit of measure vw (viewport width), to calculate from the height of the monitor, use vh (viewport height).

I'm assuming you want the height of the <div> with class .topo equal to 29.3% of the width of the monitor.

@media screen and (min-width: 0px) and (max-width:1000px) {
  .topo {
    height: 29.3vw;/*VW é a unidade de medida da largura do monitor*/
    /*height: calc(29.3vw - 50px); opcionalmente e comentado, a forma correta da função calc do css3*/
}
    
18.10.2016 / 22:27