Faire varier la taille de la police

**philippef** · 08/08/2018, 11h25

Bonjour,

La taille de la police du titre du site ne change pas lorsque je change la taille de l'écran.
ça fonctionne pour le menu mais pas pour le titre !!!

dans le fichier index :

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
 
<!DOCTYPE HTML>
<html>
<head>
<title>Jumelage Troissy Partenheim</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Troissy, Partenheim, Champagne"/>
<meta name="keywords" content="Champagne, Troissy, Bouquigny, Dormans, 51, 51700, Partenhiem, Allemagne  "/>
<meta name="Robots" content="index, follow, all"/>
<meta name="Revisit-after" content="5 days"/>
<link rel="icon" type="image/ico" href="images/10199.ico" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/medias.css" />
<script type="text/javascript" src="scripts/scripts.js"></script />
</head>
<body>
<div id="global">
	<div id="bandeau">
		<div id="b1"><img src="images/blason-Troissy.jpg" alt="" title="Cliquez ici pour afficher le site en français" id="imgbandeau" onclick = "javascript:cacher('menuD');montrer('menuF')"/></div>
		<div id="b2">JUMELAGE <br> TROISSY ~ PARTENHEIM </br></div>
		<div id="b3"><img src="images/blason-Partenheim.jpg" alt="" title="Cliquez ici pour afficher le site en allemand" id="imgbandeau2" onclick = "javascript:cacher('menuF');montrer('menuD')"/></div>
	</div

dans le fichier style.css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
html, body {height:100%; border:0; font-size:1em; min-height:100%; padding:0; }
#global { width:80%; font-family:verdana; margin-left:auto; margin-right:auto;}
 
/*  LE BANDEAU   */
#bandeau { overflow:auto; }
#b1 { width : 20%; float:left; }
#imgbandeau { width:30%; margin-left:37%; float:left; cursor: pointer; }
#b2 { width : 60%; float:left; text-align:center; color:#FFF; background-image:url("../images/vignes.jpg"); font-size:2.4em;}
#b3 { width : 20%; float:left; }
#imgbandeau2 { width:33%; margin-left:33%; margin-top:0%; float:left; cursor: pointer;  }

dans le fichier medias.css

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
 
/*  MEDIA  */
img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
	height: auto;
       _width: 100%; /* IE6 seulement */
}
@media screen and (max-width: 1440px) {
	html { font-size : 100%; }
	body { font-size:.85em;  }
	#global { width : 80%; }  
	#b2 { font-size:2.4em; }
}
 
@media screen and (max-width: 425px) {
	body { font-size:75%;	} /* 75%*/
	#global { width : 100%;  }
	#b2 { font-size:1em; }
}

c'est #b2 qui me pose problème. Le titre reste toujours avec la même taille !!
Merci d'avance

**psychadelic** · 08/08/2018, 13h23

J'ai pas regardé en détail, mais tu utilises des em qui est une unité de mesure relative à celle de l'élément qui l'englobe hiérarchiquement.

donc dans ton code la taille du #b2 dépend de la taille utilisée par #bandeau

sinon, il est aussi probable que tu ais une erreur de syntaxe dans ton css et qui rend invalide tes instructions css.

Faire varier la taille de la police

CSS

Vue hybride

Discussions similaires

Partager

Partager