---

Forum » » Le coin des codeurs » » responsive machinchose

---

Posté : 29 mars 2013 à 22:41

salut!
j ai commencé a me pencher sur le probleme

lorsque l on est sur un petit mobile on a pas forcement besoin de tout=> on n affiche pas ce dont on a pas besoin, ensuite il faut agandir la taille des differents textes, redimensioner pas mal des choses ( imaginez de gros doigts sur un petit clavier..^^)
dans le header du theme voulu il faut mettre
echo '<meta name="viewport" content="width=device-width, maximum-scale=1"/>';


(cela empeche le redimensionement automatique de la page)

et a la fin du style.css c est là que vous devez tout faire


/*la suite n agit que si l 'ecran fait moins de XXXpx    */
@media (max-width: 920px){
  /************************************************************************
Aspect Général du site : Font, Textes, Marges, etc...
*************************************************************************/
body {
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    
}

  #col_LB {
    /* on cache les blocs de gauches */
   display: none;
}

#col_RB { /* Là où se trouvent vos Blocs droits*/
    /* on cache les blocs de droites */
    display: none;
}
 #container {
    text-align:center;
    margin-left:0;
    margin-right:0;
    width:985px;
}
#header { /* Ici - Le Header Complet avec Image de Fond */
    background: !url(!../images/2header.jpg);
    background-size: 985px 180px;
    height: 180px;
    width: 985px;
}
#header .slogan { /*Positionnement du Slogan du Site dans le Header*/
    text-align: left;
    color: #ffff00;
    font-size: 4em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 15px 0px 0px 0px;
}

#header .menuHG{ /*Positionnement du bloc menu Haut Gauche du Site dans le Header*/
        position: relative;
        text-align: left;
        line-height: 20px;
    color: #ffffff;
    font-size: 3.0em;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
    padding: 0px 0px 0px 0px;
}
etc.....

en fait vous reecrivez un ccs complet

petit exemple pas fini ( je demarare à peine)

http://s460077810.onlinehome.fr/index.php?op=edito


pour vous aidez , je conseille "opera" et "opera mobile for windows"
qui aident bien

voilà^^

---

Cet article provient de NPDS
https://www.npds.org/viewtopic.php?topic=25783&forum=5