AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Adapter la mise en page grâce aux "media queries"

    Partagez
    Silver Star
    MasculinAge : 20Messages : 43

    le Sam 6 Oct 2012 - 15:45

    Salut !

    Vous vous demandez sûrement à quoi peuvent servir les media queries ? C'est simple, comme écrit dans le titre au-dessus, il adapte la mise en page à tout les types d'écrans. Grâce à eux, on pourra avoir le même rendu d'une page web, d'un site ou d'un forum sur une tablette, un netbook (un mini ordinateur, donc un écran plus petit) et un ordinateur normal. En gros, les media queries règles les problèmes d'affichages par rapport au types d'écrans qu'on utilise, ce qui est nettement plus agréable quand on est sur un forum par exemple.

    Par exemple, quand on est sur notre cher forum "Never-Utopia" depuis un netbook, ça donne quelque chose de pas très jolie à voir :

    Spoiler:

    ou ça !

    Spoiler:

    Donc nos media queries vont nous aider à régler tout ça ! :)

    la méthode est toute simple ! Et tout se fait à partir de la feuille de style de votre forum.


    Code:
    @media screen and (max-width: 1024px)
    {
      /*notre code css*/
    }

    Le "(max-width: 1024px)" veut dire quel code sera appliqué quand la largeur de la fenêtre du visiteur fait au maximum 1024px. Et si par exemple, la largeur de la fenêtre du visiteur est plus grande, on appliquera ce code là :

    Code:
    @media screen and (max-width: 1280px) {
      /*notre code css*/
    }

    On peut aussi adapter la mise en page à des écrans comprit par exemple entre 1280px et 1024px. Dans ce cas, notre code sera comme ceci :

    Code:
    @media all and (min-width: 1280px) and (max-width: 1024px) {
    /*on mettra notre code css ici*/
    }

    Grâce à ça, les problèmes d'affichage de la page en fonction du type d'écran utilisé sera réglé, et notre cher forum sera le même pour tout le monde :

    Spoiler:

    Si vous avez des questions n'hésite pas, c'est la première fois que je poste une astuce alors je sais pas si j'ai été très clair pour tout le monde. Wink
    Alumine
    FémininAge : 19Messages : 486

    le Sam 7 Mar 2015 - 15:20

    Super tuto ! C'est de choses simples comme ça que j'ai besoin pour mon forum ^^ Surtout que de plus en plus d'utilisateurs sont sur tablette (=




    Before...:

    mon ange gardien ♥
    En ligne
    Cruelly
    FémininAge : 23Messages : 2424

    le Mar 18 Aoû 2015 - 13:35

    C'est tout simplement super comme astuce merci beaucoup :)



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    En ligne
    Kelalin
    FémininAge : 24Messages : 1403

    le Mar 18 Aoû 2015 - 16:34

    Merci (’-’*)
    fascicularia
    MasculinAge : 48Messages : 181

    le Lun 7 Déc 2015 - 16:44

    Merci mais on pourrait avoir un exemple concret ?? je vous avouerai avoir à peu prés compris le principe mais en application, c'est autre chose. si par exemple on souhaite l'appliquer au body, on fait comment ?
    Contenu sponsorisé

    Aujourd'hui à 22:47


      La date/heure actuelle est Mar 6 Déc 2016 - 22:47