1480 sujets

Web Mobile et responsive web design

[Résolu] @media

bonjour je n'arrive pas a utiliser la balise @media pour changer la taille de on texte,
je susi relativement nouveau en html css mais je pensai savoir l'utiliser, j'ai meme reverifier sur des site dont celui la pour m'assurer de bien l'avoir utiliser, j'ai donc :
.all{
background-color: whitesmoke;
font-size: 24pt;
}
@media screen and (min-width: 66%){
.all{
background-color: whitesmoke;
font-size: 16pt;
}
}
la couleur etai pour tester plus facilement mais meme sa ne marche pas je pourrai vous montrer le html mais ya deja pas mal de truc et jai deja verifier si cetai pas un probleme avec la class="all" et elle marche bien
merci d'avance Smiley biggrin
Easy.
Le problème est la valeur donnée à min-width, en pourcentage. Tu te réfères à la largeur du viewport, ok ? Le viewport est est la totalité de la fenêtre du navigateur. Ton site ne peut avoir accès à rien d'autre (oublions device-width). n% serait n% de quelque chose, mais il n'y a rien au-dessus.
Donc ta valeur doit-être en unité absolue, typiquement cm, in ou px. Pas sûr que rem marche. em ne marchera pas car relatif à la valeur de la propriété héritée du parent ou de la valeur initiale.
Que veut tu faire ?
Oui, exact, de plus...
Je ne sais pas si ce que donne le convertisseur s'applique aussi aux @media, mais 66% font 0.66rem ou 10.56px. Ce sont des valeurs bien trop faibles.
Personnellement, j'utilise 35em comme point de rupture pour les mobiles et je n'ai jamais eu de problème avec aucun mobile. Le convertisseur donne 3500% pour 35em.
De toute façon, utiliser les % n'est pas une bonne idée pour les @media.
https://codebeautify.org/rem-to-px-converter
merci pour vos 2 suggestions j'ai pus finir ce que je voulais tous seul j'ignorai qu'il fallait éviter les %
et merci pour le convertisseur je n'y avait pas penser non plus
Prévenir un modérateur
Répondre au sujet
Aller à