web-dev-qa-db-fra.com

Rendre le contenu div réactif

Mon contenu n'est pas réactif pour le moment. Je l'ai testé sur iPhone et le texte passe à l'écran.

J'ai changé le CSS de mon conteneur en:

#container2 {
    width: 960px; 
    max-width: 90%;
    position: relative;
    left: 50%;
    margin-left: -480px;
    line-height: 1.4em;
}

Lorsque je le teste après le changement, le contenu disparaît. J'ai lu que mettre max-width: 90%; lui permettrait de ne pas dépasser la largeur de la frontière ( http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design ) mais, évidemment, cela n'a pas fonctionné. Qu'est-ce que je fais mal?

htmlresponsive-designcss
7
user1636968

essayez ce css:

/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

Voici la démo: http://jsfiddle.net/ongisnade/CG9WN/

14
Fredy

Pas grand chose à faire, mais je pense que ce que vous cherchez, c'est de retourner les valeurs de width et max-width:

#container2 {
  width: 90%;
  max-width: 960px;
  /* etc, etc... */
}

Cela vous donnera un conteneur représentant 90% de la largeur de l'espace disponible, jusqu'à un maximum de 960 px, mais cela dépend du redimensionnement de son conteneur. La conception réactive est une grosse boule de cire, elle ne raye donc même pas la surface.

7
ultranaut

@media screen and (max-width : 760px) (pour tablettes et téléphones) et utiliser avec ceci: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

0
Scriptery