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

**misterfredy** · 16/02/2016, 15h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'});
}

**SpaceFrog** · 16/02/2016, 16h03

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

**misterfredy** · 16/02/2016, 16h56

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

imaginez cela

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 16/02/2016, 17h10

essayes vw

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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/

**misterfredy** · 16/02/2016, 17h30

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!

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

JavaScript

Discussions similaires

Partager

Partager