Changement d'une Var selon la largeur de l'ecran

Version imprimable

16/02/2016, 15h43
misterfredy

Changement d'une Var selon la largeur de l'ecran
Bonjour;
Alors je rencontre un problème.
J'aimerais qu'une Var change automatiquement selon la taille de l'écran.
J'ai tenté ça mais ça marche pas automatiquement, il faut actualiser la page pour que ça marche. pouvez-vous m'aidez s'il vous plaît.
Code:

1 2 3 4 5 6 7 8 var cw = $('.class1').width(); if ($(window).width() >=1050){ $('.class1').css({'height':cw+'px'}); $('.class2').css({'height':cw+'px'}); }
16/02/2016, 16h03
SpaceFrog

Tu sais que les medias queries css sont faites pour cela ?

Oui je sais très bien mais dans mon cas je ne peux les utiliser.

imaginez cela

HTML:
Code:

1 2 3 4 <body> <div id="carre"></div> </body>
CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 body{ width: 100%; text-align:center; } #carre{ position:relative; display:inline-block; width:60%; background-color:rgba(255,0,0,1); }
JS
Code:

1 2 3 var widthcarre = $('#carre').width(); $('#carre').css({'height':widthcarre+'px'});
J'aimerai que la div "carre" reste toujours un carré avec une largeur de 60% qu'importe la largeur de l’écran sans actualiser la page.

16/02/2016, 17h10
SpaceFrog
essayes vw

http://www.w3.org/TR/css3-values/#vi...lative-lengths
Code:

1 2 3 4 5 6 7 #carre{ position:relative; display:inline-block; width:60vw; height:60vw; background-color:rgba(255,0,0,1); }
Démo
https://fiddle.jshell.net/284c9f7c/1/
16/02/2016, 17h30
misterfredy

MERCI BEAUCOUP !
c'est exactement ce qui me fallait et tu viens de m'apprendre un truc qui va me faciliter la vie ! Merci encore!