Police adaptive à l'écran

**seeyou** · 15/06/2020, 10h35

Salut tout le monde,
Je viens vers vous pour un petit souci. Je pense que c'est mon approche qui est mauvaise, mais je ne vois pas vraiment comment je peux faire autrement. (Sans réécrire la totalité du code, ce que je ne souhaiterais pas).
Actuellement la police de mon site est basée sur une variable simple avec du "map-guet" :

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
$font-size-base: 1.6em;
 
    $font-size: (
        'iconote': 3em,
        'note': 1.3em,
        'text-menu': 2.5em,
        'text-tableau': 2em,
        'chic': .9em,
        'papilles':  1.4em,
        'gout':   1.4em,
        'base':    $font-size-base,
        'footer':  1.6em,
        'heading':   2em,
        'titre-menu': 4em,
    );

Mais comme vous pouvez vous en douter celles-ci ne sont pas très responsive, du coup j'ai voulu adapter mon code et j'ai donc ajouter 2 media principaux :

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
28
29
30
31
32
33
34
35
@media screen and (max-width: 1130px) {
    $font-size-base: 16vw;
 
    $font-size: (
        'iconote': 30vw,
        'note': 13vw,
        'text-menu': 25vw,
        'text-tableau': 20vw,
        'chic': 9vw,
        'papilles':  14vw,
        'gout':   14vw,
        'base':    $font-size-base,
        'footer':  16vw,
        'heading':   20vw,
        'titre-menu': 40vw,
    )
}
 
@media screen and (min-width: 1130px) {
    $font-size-base: 1.6em;
 
    $font-size: (
        'iconote': 3em,
        'note': 1.3em,
        'text-menu': 2.5em,
        'text-tableau': 2em,
        'chic': .9em,
        'papilles':  1.4em,
        'gout':   1.4em,
        'base':    $font-size-base,
        'footer':  1.6em,
        'heading':   2em,
        'titre-menu': 4em,
    );
}

Mais cela ne fonctionne pas.
Encore une fois je pense que mon approche est mauvaise, mais j'aimerais conserver quelque chose d’assez généraliste pour garder mon site maintenable rapidement.
Si vous avez des idées sur comment je peux faire fonctionner ces media sans en créer des centaines, je suis preneur.

Merci à toute les personnes qui prendront le temps de me répondre. Si jamais je ne suis pas assez clair, hésitez pas à me le dire, j'essaierais de m'expliquer autrement.

**NoSmoking** · 16/06/2020, 17h46

Bonjour,
je ne comprends pas la démarche attendu que tu utilises une unité relarive, em, il te suffit de changer la font-size du <body> pour que la cascade fasse le reste !

Police adaptive à l'écran

CSS

Vue hybride

Discussions similaires

Partager

Partager