Réduire divs à 100% de la mise en page iphone

Question

Je ne serais vraiment pas poster une question si je n'avais pas passé des heures à creuser des fichiers et de la recherche. Je ne dois vraiment pas savoir ce que je cherche: - |

Je veux savoir comment et pourquoi divs dans un récipient (ou le conteneur lui-même) peuvent changer à 100% de sa largeur lorsqu'une conception adaptée est mise à l'échelle des dimensions iphone - comme ci-dessous:

http://demo2.woothemes.com/whitelight/about/

la barre latérale se trouve sous le contenu principal, puis les divs à l'intérieur s'étendent à 100%

Ça me rend absolument fou! Toute aide/direction doit apprécier :)

Answer 1

requête sensibles exemple de mise en page de base des médias:

Demo: http://jsbin.com/ayojan/1/edit

Redimensionner navigateur pour voir l'effet.

div { 
    outline:solid black; 
} 
.content { 
    width:80%; 
    float:left; 
} 
.sidebar { 
    width:20%; 
    float:left; 
} 

@media only screen and (max-width: 767px) { 
    .sidebar { 
    width:100%; 
    float:none; 
} 
    .content { 
    width:100%; 
    float:none; 
    } 

} 

Points clés: dans la requête de support que vous unfloat les éléments (float: none) et les mettre à la largeur: 100%;