Tutoriel media queries taille des "containers" ??

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Tutoriel media queries taille des "containers" ??

    Salut,
    Je cherche un cours, un tutoriel, pour apprendre à gérer la largeur d'affichage du texte sur les différentes parties (containers ?) d'un template en fonction de la taille des écrans.
    J'utilise template creator, donc je peux assez facilement cibler les tailles d'écran, mais je cherche à comprendre comment dire : telle position doit s'afficher en largeur 95%.

    C'est bien l'ID qu'on cible, c'est ça ? avec un # devant le nom de l'ID, mais ensuite ?

    (sur écran large mes contenus s'étendent sur 90% de l'écran, ce qui convient très bien, mais sur mobile c'est trop étroit, j'ai besoin de changer ça)
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    salut, bah ensuite ce n est que du css...
    recherches les requetes media (@media...)
    CE qui est inscrit dans la requete correspond aux resolutions decrites avant le {}
    et sont appliquées directement en fonction de la largeur d'ecran.

    Commentaire


    • #3
      Salut,

      Alors, j'ai trouvé les media et quelque chose m'interroge : la largeur du "container" est définie en pixels (pas en %).
      Par exemple :

      Code:
      @media screen and (max-width: 524px) {
      
      .container {
          width: 292px;
      }
      Si je désactive cette règle (dans l'inspecteur), ça semble régler mon problème (qui est que sur iphone, sens portrait, le texte occupe vraiment trop peu d'espace en largeur).
      Mais avant de bidouiller le css du développeur, je me dis que définir cette largeur en pixels doit avoir un intérêt quelconque, non ?
      Et si oui, lequel ??
      Pourquoi ne pas laisser la règle générale qui donne à ce .container une largeur de 90% ?
      Flo, Ariège

      Il n'y a que celui qui a honte d'apprendre qui a peur de demander

      Commentaire


      • #4
        c est normal que ce soit des pixels. tu defini ta requete selon la largeur.
        la requete media juste au dessus signifies touts les peripherique qui ont une resolution maxi de 524px.
        Si tu veux que ton conteneur fasse 90% de la largeur passe le width à 450 pixels.
        tu peut aussi la definir en %.
        Ne modifies pas l'existant, ajoutes ta requete dans le fichier custom.css du template.
        Mefies toi aussi des deformations non souhaitées.
        +

        Commentaire


        • #5
          Mais s'il existe déjà une règle qui ... règle la largeur du container à 90% en... règle générale (hors des media queries), cette information parait redondante, non ?
          Flo, Ariège

          Il n'y a que celui qui a honte d'apprendre qui a peur de demander

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X