Rendere il contenuto div reattivo

Question

Il mio contenuto non è reattivo al momento. L'ho provato su iPhone e il testo va oltre lo schermo.

Ho cambiato il CSS del mio contenitore:

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

quando prova che dopo il cambiamento, il contenuto scompare. Ho letto quella massima larghezza: 90%; consentirebbe di non superare la larghezza limite (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design) ma ovviamente non ha funzionato. Che cosa sto facendo di sbagliato?

Answer 1

provare questo 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%; } 
} 

Ecco la demo: http://jsfiddle.net/ongisnade/CG9WN/

Answer 2

Non c'è molto da andare in là, ma penso che quello che stai cercando è quello di capovolgere le width e max-width valori:

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

Che ti do un contenitore che è il 90% della larghezza dello spazio disponibile, fino a un massimo di 960 px, ma dipende dal fatto che il contenitore è ridimensionabile. Il design reattivo è una vera e propria palla di cera, quindi non graffia nemmeno la superficie.

Answer 3

@media screen and (max-width : 760px) (per tablet e telefoni) e utilizzare con questo: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">