IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Rendre un texte Responsive


Sujet :

Responsive design en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Reconverti Dev Web
    Inscrit en
    Septembre 2019
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Reconverti Dev Web
    Secteur : Bâtiment Travaux Publics

    Informations forums :
    Inscription : Septembre 2019
    Messages : 88
    Par défaut Rendre un texte Responsive
    Bonjour,

    Est-il possible sans framework de rendre un texte responsive suivant la taille de l'ecran de la page?

    Ou par rapport à son container?

    Cdt.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    qu'entends tu exactement par « texte responsive » ?

    A défaut tu peux essayer quelque chose comme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .class-du-texte {
      font-size: 10vmin;
    }
    Ressource :

  3. #3
    Membre éprouvé
    Homme Profil pro
    Agence digitale
    Inscrit en
    Avril 2020
    Messages
    69
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Agence digitale
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2020
    Messages : 69
    Par défaut
    Bonjour,

    Un texte va s'adapter à son container. Il faut donc rendre son container responsive (par exemple: display:block;width:100%)
    Si vous souhaitez que la taille de la police évolue en fonction de la taille de l'écran, il y a plusieurs solutions possibles: https://www.ionos.fr/digitalguide/si...commandes-css/

    Bon courage !

  4. #4
    Membre confirmé
    Homme Profil pro
    Reconverti Dev Web
    Inscrit en
    Septembre 2019
    Messages
    88
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Reconverti Dev Web
    Secteur : Bâtiment Travaux Publics

    Informations forums :
    Inscription : Septembre 2019
    Messages : 88
    Par défaut
    Merci pour vos reponses, le vmin semble être une approche intéressante.

    En effet le but est que le texte soit proportionné à son container afin que le rendu soit toujours identique quelque soit la taille de l'ecran et du container.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Rendre du texte invisible
    Par FabaCoeur dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/08/2009, 20h42
  2. rendre le texte de l'item sélectionné lisible
    Par Paul Van Walleghem dans le forum Windows Forms
    Réponses: 4
    Dernier message: 11/12/2008, 11h56
  3. [DOM] Rendre un texte invisible
    Par LEK dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 15/02/2008, 19h34
  4. rendre zone text enabled
    Par MSM_007 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 14/10/2006, 14h39
  5. [Débutant]RichEdit => Rendre le texte non sélectionnable
    Par Runlevel dans le forum C++Builder
    Réponses: 4
    Dernier message: 02/12/2004, 23h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo