1397 sujets

Web Mobile et responsive web design

Bonjour à tous, et par avance merci pour votre aide.

J'ai besoin de modifier la taille de ma police en fonction de celle de ma page.
Pour cela, j'ai utilisé les media queries.
Mais le problème est que j'arrive à agir sur la couleur de mon texte, mais pas sur sa taille !
J'ai beau écumer google depuis 2 jours à la recherche d'une solution, rien ne fonctionne...
Voici mon code :
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="portfolio1.css">
	
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width"/>

	<link href="bootstrap.css" rel="stylesheet">
	<script src="jquery.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


	<title>Portfolio</title>

</head>
<body>
	<div class='jumbotron'><div class="container">
	
			<h1>Ma presentation<br/><br/></h1>
						
			<div class='text'><p> blabla.</p>
				<p>bidule s'en va-t-en guerre</p>
				<p> don't put baby in a corner</p>
				<p> mais qu'est-ce que c'est que cette histoire de pieds !<br/><br/></p>
				<p><span class='italique'>It's never too late to live off his passion !</span></p></div>

		</div>
		<div class='agratter' id='grat'><img src='pinceau_flou_g2znk3.jpg' data-hidden="pinceau_net_opwhni.jpg" alt="image floue" data-soluce="image nette"  height="100" width="100"/><canvas id="grat1"></canvas>
			</div></div>



		<script src="portfolio1.js"></script>
	</body>
	</html>


.jumbotron {
 display:block;
 cursor: url("http://res.cloudinary.com/jcherry07/image/upload/v1485783928/blue_squeegee_vptst2.png"),default; 
}

.agratter {
  position:relative;
  top : 1px;
  bottom:50px;
}

.agratter canvas {
  top:0;
  bottom : 0;
  right:0;
  left:0;
  position: absolute;
  z-index: 2;
}
canvas {
  width : 100%;
  height : 100%;
  background-image: url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg');
  background-image: -webkit-image-set(url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg') 1x, url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg') 2x );
  background-size: cover;
}

img {
  width: 100%;
  height : auto;
}
p{
  font-size:100%;
}

.container {
 position : absolute;
 left :  5%;
 right : 20%;
 z-index : 3;
 color: white;
 margin-top: 10%;
}

.italique {
  font-size : 1.2em;
  font-style: italic;
}

span {
  position:absolute;
  left : 10%;
}

h1 {
  text-align : center;
}

.text{
 margin-bottom: 0%;
 text-align : center;
}


@media all and (max-width: 1040px)
{
  p{
    font-size:80%;
  }

  .container {
    overflow:auto;
    position : absolute;
    top : 25%;
    bottom: 35%;
    left :  5%;
    right : 40%;
    z-index : 3;
    color: white;
    padding-top: 10%;
    background-color: rgba(0,155,0,0);
    padding-bottom: 10%;
  }

}
@media all and (max-width: 815px)  
{

  .container {
    overflow:auto;
    position : absolute;
    top : 20%;
    bottom: 45%;
    left :  5%;
    right : 20%;
    z-index : 3;
    color: white;
    background-color: rgba(0,155,0,0);
    padding-bottom: 10%;
  }

  p{
    font-size:60%;
  }
}

::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2); 
  /*couleur du fond de la scrollbar*/
}

::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background: rgba(255, 204, 153, 0) /*couleur de l'ascenseur*/;

}





J'espère que quelqu'un pourra m'aider... :desespoir:
Bonjour.

L'unité vw peut vous aider, elle est proportionnelle à la largeur de la fenêtre...

Je vois que vous utilisez les em et les pourcentages... Vous pouvez changer la valeur de font-size de body avec l'unité vw, la cascade fera le reste...

Attention toutefois, le texte peut alors devenir très grand ou très petit, il faut limiter cela soit avec une media-query, soit à l'aide d'un calcul très savant (page en anglais) :
https://css-tricks.com/snippets/css/fluid-typography/

Smiley smile
Modifié par Zelena (22 Mar 2017 - 13:34)
Merci pour votre réponse, mais j'ai déjà essayé toutes les mesures possibles(et lu cet article), et malheureusement cela ne change rien...
Zelena a écrit :
Bonjour.

L'unité vw peut vous aider, elle est proportionnelle à la largeur de la fenêtre...

Je vois que vous utilisez les em et les pourcentages... Vous pouvez changer la valeur de font-size de body avec l'unité vw, la cascade fera le reste...

Attention toutefois, le texte peut alors devenir très grand ou très petit, il faut limiter cela soit avec une media-query, soit à l'aide d'un calcul très savant (page en anglais) :
https://css-tricks.com/snippets/css/fluid-typography/

Smiley smile
Vous voulez dire que l'unité vw ne fonctionne pas sur votre navigateur ?

Quel est votre navigateur ?

Smiley sweatdrop
Je teste sur chrome et firefox.
Je viens de remarquer que les différentes valeurs (em, rem, vw etc) fonctionnent sur la balise ayant la classe 'italique', mais pas sur les paragraphes au-dessus...
Modifié par joanC (22 Mar 2017 - 13:55)
J'ai repris - en partie - votre code et il n'y a pas de soucis...

Il est vrai que je n'ai pas repris Bootstrap et je vois qu'il charge des styles après votre feuille de style... Il écrase peut-être les styles que vous appliquez sur les balises paragraphes.

Une façon de faire est de mettre !important sur la même ligne que les déclarations qui posent souci :
p
	{
	font-size:80% !important;
	}


Une autre est de mettre une classe aux éléments paragraphe dont vous voulez avoir le contrôle comme vous l'avez fait pour les paragraphes de classe italique...

Enfin, peut-être, ce serait intéressant de charger vos styles après les styles Bootstrap et non avant...
Merci beaucoup !
Cela fonctionne, mais j'ai tellement entendu dire qu'il ne fallait pas utiliser important que je n'avais pas tenté...et pourtant c'est la seule chose qui fonctionne |
Encore merci !
Zelena a écrit :
J'ai repris - en partie - votre code et il n'y a pas de soucis...

Il est vrai que je n'ai pas repris Bootstrap et je vois qu'il charge des styles après votre feuille de style... Il écrase peut-être les styles que vous appliquez sur les balises paragraphes.

Une façon de faire est de mettre !important sur la même ligne que les déclarations qui posent souci :
p
	{
	font-size:80% !important;
	}


Une autre est de mettre une classe aux éléments paragraphe dont vous voulez avoir le contrôle comme vous l'avez fait pour les paragraphes de classe italique...

Enfin, peut-être, ce serait intéressant de charger vos styles après les styles Bootstrap et non avant...
joanC a écrit :

Cela fonctionne, mais j'ai tellement entendu dire qu'il ne fallait pas utiliser important que je n'avais pas tenté...et pourtant c'est la seule chose qui fonctionne |


Ravie que cela vous convienne.
!important existe et donc peut être utilisé. Mais c'est un peu la solution de dernier recours, l'as dans votre manche. Dans les conditions normales - les plus courantes, il y a d'autres solutions...
À utiliser avec parcimonie donc.

Smiley smile