Problème responsive design

roboto441
Les bases HTML/CSS

Salut !
J'ai un soucis avec mon design: je souhaite le rendre responsive, donc j'ai utiliser la propriété suivante pour la police:

body {
    width: 100%;
    -webkit-text-size-adjust: none;
}

Malheureusement la police reste minuscule:

Auriez-vous une solution ?

10 réponses

Lotfi Berrahal

Bonsoir,

Essaie voir de lire ça je pense que ça peut t'aider ^^

roboto441
Auteur

Le problème avec ça c'est que ça marche pas. C'est compatible avec firefox seulement =/
Je retourne voir la vidéo de grafikart sur le responsive design voir si j'ai pas rater un truc.

roboto441
Auteur

Non bah finalement ça m'a pas aidé =/.
Je comprend pas comment les elements peuvent être afficher en plus gros en fait =/

Omar Benka

Yo roboto,

Essaye ce js http://fittextjs.com/

roboto441
Auteur

Non bah du coup c'est encore pas ce que je recherche xD.
Je vais agrandir toute les taille manuellement en attendant de trouver une solution ^^

Maenhyr

tu as mis la taille en px ou en em ?

roboto441
Auteur

en px.
En em y'a moyen de faire mieux ?

Maenhyr

em c'est du relatif, le texte s'adaptera mieux. Il n'y a pas que la taille du texte à mettre en em, il y a aussi les largeurs, hauteurs, marges, padding, ...

un bouton de 60px de largeur n'aura pas le même impact sur une tablette ou un iphone. Un bouton de 4em, lui ne changera pas le layout. La taille est recalculée pour avoir le même layout sur les différents appareils.

Je te conseille d'analyer des frameworks comme Bootstrap ou Foundation pour voir comment il gère tout ça.

roboto441
Auteur

ok je jette un œil par contre un téléphone en landscape ça casse encore la taille des élément en affichant tout encore trop gros =/
Par contre je comprend pas trop comment marche Foundation ni le Bootstrap ...
Je vais faire un petit projet pour experimenter.
De plus j'ai essayer d’intégrer Foundation, et ma police devient toute petite. y'a peut-être un problème dans ma structure ?

roboto441
Auteur

Finalement j'ai trouver une solution:

<meta name="viewport" content="width=device-width" />

Enfin ^^
Par contre j'ai toujours le soucis en landscape, une fois j'avais vu une astuce, mais impossible de retrouver. Vous n'auriez pas une solution ?