1478 sujets

Web Mobile et responsive web design

Texte responsive dans un tableau

Bonjour,

J'ai lu le tuto sur la gestion du texte avec l'unité em :
http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html
J'aimerai créer deux colonnes de texte dont la taille s'adapte à l'écran.
j'ai écrit ce bout de code :
<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="new.css" />

        <title>Titre</title>

    </head>
<body>

<div class="column">
		<h1 class="cell">blablabla</h1>
		<h1 class="cell">blablabla</h1>
</div>

</body>
</html>

mon CSS

.column
{
	display: table;
	margin-top: 200px;
	margin-right: 50px;
	margin-left: 50px;
	margin-bottom: 100px;

}

.cell
{
	display: table-cell;
	text-align: left;
	padding: 15px;
	font-family: serif;
	font-weight: lighter;
	font-size: 2em;
}

html
{
	font-size: 100%
}

mais ca n'a pas l'air de marcher. La taille du texte reste la même... Malgré la lecture de différents textes sur internet je ne trouve pas ce qu'il ne va pas.
Je précise que je débute en HTML CSS...
Merci pour votre aide !!
Bonjour !

catahah a écrit :

J'aimerai créer deux colonnes de texte dont la taille s'adapte à l'écran.


Je pense qu'il y a méprise : l'unité 'em' n'est pas fonction de la taille de l'écran, elle est en rapport avec la taille de caractère du conteneur parent...

L'unité en rapport avec la largeur de la fenêtre est 'vw'.

Smiley smile
Merci Zelena !
Je vais me pencher sur cette unité alors.
Par contre, il me semblait que "em" permettait quelque chose de similaire :
si je déclare html {font-size: 100 %} le texte devrait s'afficher différement entre un mobile et un écran 15 pouces non ? Et ensuite, je pensais que les "2em" permettait d'afficher le texte 2 fois plus grand que la taille par défaut (le 100%)...je suis une peu perdue
catahah a écrit :
Merci Zelena !
Je vais me pencher sur cette unité alors.
Par contre, il me semblait que "em" permettait quelque chose de similaire :
si je déclare html {font-size: 100 %} le texte devrait s'afficher différement entre un mobile et un écran 15 pouces non ? Et ensuite, je pensais que les "2em" permettait d'afficher le texte 2 fois plus grand que la taille par défaut (le 100%)...je suis une peu perdue

Les EM permettent d'avoir une taille relative.
Le problème est que cette taille est calculée par rapport à celle de l'élément conteneur, ce qui conduit parfois à des calculs tordus.
Pour éviter ces problèmes, mieux vaut utiliser les REM, tout aussi relatives que leurs consoeurs les EM mais ne dépendant plus dudit conteneur.
Je conçois actuellement tous mes sites avec cette unité et c'est un régal...
Notamment lorsqu'on utilise la combinaison de touches CTRL + "+" pour augmenter le niveau de zoom du navigateur.
Si tout est exprimé en REM, cela se redimensionne sans problème jusqu'à un fort taux de grossissement.
Tu définis une font-size à 1EM ou 100% ou 16px sur le CSS de ta balise BODY. Ensuite tout en REM.
sepecat a écrit :

Tu définis une font-size à 1EM ou 100% ou 16px sur le CSS de ta balise BODY. Ensuite tout en REM.


Oui, je fais la même chose. C'est la bonne méthode.
Administrateur
sepecat a écrit :
Tu définis une font-size à 1EM ou 100% ou 16px sur le CSS de ta balise BODY. Ensuite tout en REM.

- OK pour 1em ou 100% (même si c'est inutile puisque c'est la valeur par défaut)
- Surtout pas de 16px car une valeur de référence figée va figer tous les descendants également même si lesdits descendants sont en em ou rem
- Sinon, une valeur qui peut être pratique à l'usage est une font-size: 62.5% sur html (pas body) : https://blog.goetter.fr/2016/07/05/lastuce-du-font-size-62-5-oui-non-ou-ca-depend/
Raphael a écrit :

- OK pour 1em ou 100% (même si c'est inutile puisque c'est la valeur par défaut)
- Surtout pas de 16px car une valeur de référence figée va figer tous les descendants également même si lesdits descendants sont en em ou rem
- Sinon, une valeur qui peut être pratique à l'usage est une font-size: 62.5% sur html (pas body) : https://blog.goetter.fr/2016/07/05/lastuce-du-font-size-62-5-oui-non-ou-ca-depend/

Effectivement, je suis d'accord avec toi sur les restrictions apportées et je ne citais la mesure 16px que parce qu'on la trouve dans certaines documentations (je l'ai encore vue récemment sur un bouquin dédié au responsive Smiley ohwell ).
Pour ma part, je n'utilise sur mes sites que la version 1 EM sur font-size du BODY.
Même si elle correspond, de facto, à la valeur a priori déjà installée par défaut lors de toute arrivée sur un navigateur, l'expérience m'a appris qu'il valait mieux enfoncer le clou et bien définir les choses, au risque d'être redondant.
Quant au 62,5% sur la balise HTML, on le voit effectivement souvent cité mais je n'ai pas encore franchi le pas, estimant peut-être que cette balise est trop en amont et ne concerne pas le contenu proprement dit du document, à la différence de BODY.
Ceci n'étant, bien entendu, pas un credo incontournable.
Modifié par sepecat (31 Jul 2016 - 15:37)
Sujet clos
Aller à