3

Existe alguma forma de obter o width total de um monitor usando o CSS ou CSS3? Eu sei que em JS existe o $(window).width(); que associa à uma variável a largura do tamanho do monitor.

Agora eu precisava saber se existe em CSS essa forma de obter o tamanho total do width pois preciso inserir essa variável no CSS.

9
  • Está usando qual pre-compilador? less? sass? Commented 2/07/2014 às 14:10
  • Sim e não. CSS não tem variáveis, mas dependendo do seu problema concreto pode ser possível resolver. Você pode detalhar o problema em si?
    – bfavaretto
    Commented 2/07/2014 às 14:10
  • @bfavaretto preciso descobrir qual largura total da tela, para eu adicionar o valor de 50% numa animação, usando o animate CSS, tipow, a div vai fazer o bounceOutRight, eu preciso decobrir o tamanho da tela, dividir por 2 e colocar no 100% da animação essa variavel que vai receber a metade do cálculo, entende?
    – Furlan
    Commented 2/07/2014 às 14:12
  • 2
    @RogersCorrêa , resolvi o problema, consegui colocar o valor de 100% no animate...obrigado....fim de tópico
    – Furlan
    Commented 2/07/2014 às 14:57
  • 2
    Se for possível, responda sua própria pergunta com a forma como solucionou o problema e marque-a como resolvida. O seu problema resolvido hoje pode ser útil para outros no futuro. ;) Commented 2/07/2014 às 17:13

2 Respostas 2

2

Não sei se é o caso, mas veja se "viewport-percentage lengths" serve.
Ex:

 div {
    width: 100vw; // 100% viewport width
    height: 100vh; // 100% viewport height
 }

Caso queria ler sobre o assunto:
https://css-tricks.com/viewport-sized-typography/
https://www.w3.org/TR/css3-values/#viewport-relative-lengths

1

Solução postada pelo OP na pergunta:

@-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%);
   }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .