Font-size qui ne bouge pas

philippef -  
 philippef -
Bonjour,
Je suis entrain de refaire un site pour qu'il soit lisible sur pc, tablette et smartphone.
donc qu'il soit responsive design.
Presque tout fonctionne correctement selon les tailles que j'affiche. La taille des images varie, ainsi que les div. Par contre la taille des lettres cad les font-size restent les mêmes.
ma page index 

<!DOCTYPE HTML>
<html>
<head>
<title>Association pour l'Animation Culturelle de Troissy~Bouquigny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Association culturelle, Culture, Histoire, Troissy, Bouquigny, Champagne"/>
<meta name="keywords" content="Association, Culturel, Histoire, Crypte, Brocante, Champagne, Troissy, Bouquigny, Dormans, 51, 51700 "/>
<meta name="Robots" content="index, follow, all"/>
<meta name="Revisit-after" content="5 days"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

<div id="bandeau">
 <img src="images/logo_association.jpg" alt="" id="imgbandeau" />
 <img src="images/crypte.jpg" alt=""  id="imgbandeau1" />
 <img src="images/bandeau.jpg" alt="" id="imgbandeau2" />
 <span class="span-bandeau"> Jean-Pierre déconnexion </span>
</div>
<div id="filariane">
  <span class="span-ariane">Vous êtes ici </span><img src="images/ariane.jpg" alt="" class="span-ariane-img" /> 
  <?php 
  if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
   switch($page){
    case 'accueil': echo("Accueil");break;
  } 
  ?>
</div>
<div id="mainpage">
 <div id="menu"><br />
  <nav>
  <ul>
   <li><a href="index.php?page=accueil" rel="nofollow" target="_blank">Accueil</a></li>
   <li><a href="index.php?page=association" rel="nofollow" target="_blank">L'Association</a></li>
   <li class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu4'));">Troissy historique</span></li>
   <ul class="sousmenu" id="sousmenu4" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=histoire" rel="nofollow" target="_blank" class="couleur">L'Histoire de Troissy</a></li>
    <li><a href="index.php?page=photos" rel="nofollow" target="_blank" class="couleur">Cartes anciennes</a></li>
    <li><a href="index.php?page=eglise" rel="nofollow" target="_blank" class="couleur">Église St-Martin</a></li>
    <li><a href="index.php?page=crypte" rel="nofollow" target="_blank" class="couleur">La Crypte</a></li>
    <li><a href="index.php?page=temple" rel="nofollow" target="_blank" class="couleur">Le Temple</a></li>
    <li><a href="index.php?page=abbaye" rel="nofollow" target="_blank" class="couleur">Abbaye de l'Amour-Dieu</a></li><br />
   </ul>
    <li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu5'));">Évènements récents</span></li>
   <ul class="sousmenu" id="sousmenu5" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=brocante_2016" rel="nofollow" target="_blank" class="couleur">2016 : brocante</a></li>
    <li><a href="index.php?page=chorales_2016" rel="nofollow" target="_blank" class="couleur">2016 : chorales</a></li>
    <li><a href="index.php?page=patrimoine_2015" rel="nofollow" target="_blank" class="couleur">2015 : journées du patrimoine</a></li>
    <li><a href="index.php?page=brocantes_2015" rel="nofollow" target="_blank" class="couleur">2015 : brocantes</a></li>
    <li><a href="index.php?page=conference_2014" rel="nofollow" target="_blank" class="couleur">2014 : conférence climat</a></li><br />
   </ul>
       <li><a href="index.php?page=visites" rel="nofollow" target="_blank" style="color:yellow">Visites</a></li>
      <!---<li><span class="menuli" onclick="javascript:showmenu(document.getElementById('sousmenu6'));">Archives</span></li>
   <ul class="sousmenu" id="sousmenu6" style="list-style-type:none; display: none;">
    <li><a href="index.php?page=2012" rel="nofollow" target="_blank" class="couleur">Évènements 2012</a></li>
    <li><a href="index.php?page=2011" rel="nofollow" target="_blank" class="couleur">Évènements 2011</a></li>
    <li><a href="index.php?page=2010" rel="nofollow" target="_blank" class="couleur">Évènements 2010</a></li>
   </ul>---!>
    <li><a href="index.php?page=contacts" rel="nofollow" target="_blank">Nous contacter</a> </li>
    <li><a href="index.php?page=devenir_membre" rel="nofollow" target="_blank">Devenir membre</a></li>
       <li><a href="index.php?page=ailleurs" rel="nofollow" target="_blank">Ailleurs dans la région</a></li>
   </ul>
  </ul>
  </nav>
 </div>
 <div id="contenu" class="clearfix">
  <?php 
  switch($page){
   case 'accueil': include ('accueil.php');break;
   case 'association': include ('association.php');break;
  }
  ?>
 </div>
</div>
<div id="pied_page"><br />se connecter | Plan du site | Mentions légales
</div>
</body>
</html>


ma feuille de style 

a{text-decoration:none;color:yellow;}
.blue:hover{color:blue; }
.blue{color:blue;}

html, body {
    height: 100%;
 font-size : 0.9em;
    background-color: #FFF;
    border: 0;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

#bandeau {
 overflow : auto;
 background-color : #A52A2A;
}
/* LE BANDEAU */
#imgbandeau {
 width : 10%; 
 margin-left : 0.8em;
 float : left;
}
#imgbandeau1 {
 width : 14.2%; 
 margin-left : 0.8em;
 float : left;
}
#imgbandeau2 {
 width : 40%; 
 margin-left : 0.8em;
 margin-top : 1%;
 float : left;
}
/*  LE FIL D'ARIANE */
#filariane {
 height : 1.3em;
 color : #FFFFFF;
 background-color : #8E514D;
}
.span-ariane {
 margin-left : 15.5%;
}
.span-ariane-img {
 margin-left : 0.5em;
} 
/*  MENU ET CONTENEUR */
#mainpage {
 display:flex;
 flex-direction:row;
 min-height : 43.2em;

}
/*    MENU   */
#menu {
 width : 15%;
 padding : 0;
 background-color:#A52A2A;
}
ul { padding:0em; margin-left:1.1em; font-family:verdana; list-style-type:none;}
li { padding-bottom:1.2em;}
li a:hover{text-decoration:underline;color:yellow}

ul.menu, ul.sousmenu { list-style-type:none;margin:0em;padding:0em;}
ul.menu li.titre { margin-bottom:0em; }
ul.sousmenu li { margin-left:0.9em; padding-bottom:0em;}
.menuli { cursor:pointer;color:yellow;}
.menuli:hover { text-decoration:underline;}
.couleur {color:#FFF;}

#ul_liste {
 text-align:center;

}

#ul_liste li { /* liste */
 list-style-type:none; 
 list-style-position:inside;
 display:inline-block;
 padding:5px;
 text-align:center;
 vertical-align:top;

}

#contenu {
 width : 85%; /*68%;*/ /*68em;*/
 min-height:90em;
 background-color:#FFF;
 font-family : verdana;
}
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }

/*    PIED DE PAGE   */
div#pied_page {
 clear : both;
 width :100%;
 height : 3.8em;
 background-color : #A52A2A;
 text-align : center;
 font-family : verdana;

 color : #FFF;
}
/*--------*/
img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
 height: auto;
       _width: 100%; /* IE6 seulement */
}

/* à supprimer */
.span-bandeau {
 color : #FFFF00; /*jaune*/
 margin-left : 10%; /*15em;*/
 }


Merci d'avance de votre aide

1 réponse

Réponse 1 / 1
totodunet Messages postés 1377 Date d'inscription   Statut Membre Dernière intervention   200
 
salut,

dans ton css la taille des lettres restent fixes à 0.9em (14px)

je suis surpris de ne pas voir l'utilisation de media queries - tu utilises des % pour les tailles de tes conteneurs ce qui fait "l'effet responsive" car il s'agit de tailles sur un rapport de résolution de l'écran. Mais pour le texte, la taille en % ne marche pas.

https://www.alsacreations.com/article/lire/930-css3-media-queries.html
0
philippef
 
Merci pour la réponse.
J'ai lu un tuto sur responsive design et sur celui tue tu indiques. Tout cela m'a l'air bien compliqué et je crois que je vais continuer sans me préoccuper des petites tablettes et des smartphones.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Bonjour
déjà tu dois mettre le font-size dans html et body en % (entre 90 et 100%)
ensuite que ce soit em ou rem le font size s'exprime en fonction des options du navigateur (préférence de taille du texte de l'utilisateur) et pas de la taille d'écran.
donc si tu veux varier le font size suivant la taille d'ecran tu devras utiliser les media querie par exemple sur le font-size de html et body en augmentant le % (ex 120%) pour les mobiles.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut voici la solution 

body html { font-size:100%;}

@media screen and (max-width: 500px) {
body html { font-size:150%;}
    }


tu peux aussi utiliser rem au lieu de em c'est plus simple (pas de cascade de taille dans les div imbriquées)
0
philippef > animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention  
 
Merci
C'est bien sympa de continuer cette discussion.
Avec de l'aide je veux bien essayer de continuer. Je ne suis pas tout jeune et j'avoue qu'à certains moments je désespère un peu car la technologie va vite !!
Donc encore merci et je vais reprendre tout ça.
0
philippef
 
Je reprends la discussion.
Avant de faire varier le font-size je voudrais déjà que le site occupe toute la largeur de l'écran pour les smartphones.
voici ce que j'ai 

html, body {
   	height: 100%;
	font-size : 90%; 
   	background-color: #FFF;
   	border: 0;
   	margin: 0;
   	min-height: 100%;
   	padding: 0;
}
@media screen and (max-width: 500px) {
	body { 
		font-size:150%;
	}
}
#global {
	width : 80%;
	margin-left : auto;
	margin-right : auto;
}

Voici la structre de la page index 

<body>
<div id="global">
	<div id="bandeau">
	</div>
	<div id="filariane">
	</div>
	<div id="mainpage">
		<div id="menu">
		</div>
		<div id="contenu" class="clearfix">
		</div>
	</div>
	<div id="pied_page">
	</div>
</div>
</body>
</html>

Merci de votre aide
0

Discussions similaires

Problème score snapchat
Lilouch -
Lilouch -

119 réponses
Msg d'erreur je dois envoyer par mail
toytoy -
toytoy -

3 réponses
Le curseur de mon ordi ne bouge plus
Vio -
LINM -

6 réponses
erreur 552
msms -
ticasu -

4 réponses
Question au sujet du *Uma Frame Buffer Size*
test1111 -
marcmarais -

3 réponses