Détecter la résolution de l'écran pour modifier les class des éléments

**GuillaumeLynC** · 22/01/2017, 13h56

Bonjour,

J'utilise bootstrap pour la conception d'un site web, voici le code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body style="background-color:gray">
	<div class="row">
		<div class="col-lg-12" style="color:white;text-align:center;background-color:black;">Minercraft-Horizon
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<img src="class/fonction/image/img_chania.jpg" style="margin-bottom:0%">
		</div>
		<div class="row">
			<div class="col-lg-2">
			</div>
			<div class="col-lg-8">
				<div class="row">
					<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Accueil
					</div>
					<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Contact
					</div>
					<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Inscription
					</div>
					<div class="col-lg-3" style="color:white;background-color:black;text-align:center">Connexion
					</div>
				</div>
			</div>
			<div class="col-lg-2">
			</div>
		</div>
	</div>
</body>

Comme vous le savez la classe "col-lg-*" détermine la résolution de l'écran, il en existe 3 autres:

col-lg-* >= 1200px
col-md-* >= 992px
col-sm-* >= 768px
col-xs-* < 768px

Ainsi j'aimerai adapter le site par rapport à l'écran de l'utilisateur.

Comme on va pas demander à l'utilisateur de nous donner le nombre de pixel sur son écran, il faudra détecter l'écran de l'utilisateur. Et tout cela demande du JavaScript. Je suis débutant dans le JavaScript (j'ai lu le cours sur le JS et à peine).

J'ai regardé sur le forum et sur d'autre forum je vadrouille à la recherche du précieux (je parle du code ^^)

Dans un premier temps j'aimerai détecter la résolution de l'utilisateur.

Une fois qu'on a détecter la résolution de l'utilisateur, il faut remplacer toutes les class comportant col-lg-* et les remplacer selon la résolution de l'utilisateur.

si l'écran de l'utilisateur est inférieur à 768px alors on remplace toutes les class comportant le nom col-lg-* par col-xs-*
si l'écran est supérieur ou égal 768px alors on remplace toutes les class comportant le nom col-lg-* par col-sm-*
si l'écran est supérieur ou égal 992px alors on remplace toutes les class comportant le nom col-lg-* par col-md-*
si l'écran est supérieur ou égal 1200px alors on touche a rien.

J'ai commencé par faire ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var hautscreen = screen.height;
 
 
//si l'écran est inférieur à 768px
if (hautscreen < 768){
	for (var i = 1; i <= 12; i++){
		var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]"); //on sélectionne toutes les balises <div> qui comporte la class "col-lg-[i]"
		div[i].classList.remove("col-lg-[i]"); //on supprime toutes les class comportant "col-lg-[i]		
		div[i].classList.add("col-xs-[i]"); // on remplace toutes les class par col-xs-[i]
	}
}
else if (hautscreen >= 768){
	for (var i = 1; i <= 12; i++){
		var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]");
		div[i].classList.remove("col-lg-[i]");
		div[i].classList.add("col-sm-[i]");
	}
}
else if (hautscreen >= 992){
	for (var i = 1; i <= 12; i++){
		var div[i] = querySelectorAll("div").getElementsByClassName("col-lg-[i]");
		div[i].classList.remove("col-lg-[i]");
		div[i].classList.add("col-md-[i]");
	}
}
else if (hautscreen >= 1200){	
}

Mais j'ai pas l'impression que ça fonctionne :/

Pourriez vous m'aider, et m'indiquer sur les erreurs que j'ai pu commettre.

Cordialement
Guillaume

**NoSmoking** · 22/01/2017, 19h26

Bonjour,
je pense que tu n'as pas bien saisie l'aide que peut t’apporter BootStrap.

Tu peux tout à fait mixer les classes justement pour prendre en compte les différentes largeurs d'affichage, donc du navigateur, et non les largeurs d'écran.
A lire donc : BootStrap Mix and match

Détecter la résolution de l'écran pour modifier les class des éléments

JavaScript

Discussions similaires

Partager

Partager