Get full monitor width using CSS3

Asked

Viewed 5,945 times

3

Is there any way to get the width total of a monitor using CSS or CSS3? I know that in JS there is a $(window).width(); which associates to a variable the width of the monitor size.

Now I needed to know if there is in CSS this way to get the full size of width because I need to insert this variable into the CSS.

html css css3

  • What pre-compiler are you using? Less? Sass?

  • Yes and no. CSS has no variables, but depending on your specific problem it may be possible to solve. You can detail the problem itself?

  • @bfavaretto I need to figure out which total width of the screen, so I add the value of 50% in an animation, using Animate CSS, tipow, div will do bounceOutRight, I need to figure out the screen size, divide by 2 and put in 100% of the animation this variable that will receive half of the calculation, understand?

  • In CSS there is no variable, but you could get the value by JS and assign to the CSS file.

  • @Rogerscorrêa, suppose my width is this: width = $(window). width(); ai I need to put this Qtde in css, which would look like this in case: @-Webkit-keyframes bounceOutRight { 0% { -Webkit-Transform: translateX(0); Transform: translateX(0); } 100% { -Webkit-Transform: translateX(width); // Aki a variaval Transform: translateX(width);// Aki a variable } } how would you define this in js?

  • 2

    @Rogerscorrêa , I solved the problem, I managed to put the value of 100% in Animate...thanks.... end of topic

  • Beauty...used his head, pumped :P

  • 2

    If possible, answer your own question with how you solved the problem and mark it as solved. Your problem solved today may be useful to others in the future. ;)

  • I posted your solution as a Community Wiki, because the question is not the most appropriate place. If you prefer, post as your own answer, so you can be voted by the visitors.

Show 4 more comments

2 answers

2

1


Solution posted by OP in question:

@-webkit-keyframes bounceOutRight {
   0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
   100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
   }
}

@-webkit-keyframes bounceOutLeft {
   0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
   100% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
   }
}

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.