sensible flottait divs

J'ai deux divs flottait à gauche de chaque width:50%; min-width:300px;
Si le div conteneur de la taille ou de la taille de l'écran dans le cas où il n'y a pas de conteneur a une largeur inférieure à 600px, naturellement, la div 2 va sous l'div 1.

Quand div deux va sous l'div 1 ils auront tout de même 50% de la largeur....il est possible de faire les deux divs largeur à 100%?

Exemple: Fondation

Dans cet exemple il y a 3 divs qui portent les uns les autres et de les redimensionner à 100% quand vous frappez leur largeur min des points d'arrêt.

C'est exactement ce que je veux atteindre, cependant je ne peux pas le comprendre, à partir de la Fondation de l'exemple que je vous ai donné.

  • Utilisation mediaqueries pour définir la largeur à 100% ci-dessous un point d'arrêt. (100% empilées les divs sont généralement utilisés pour les appareils tels que les téléphones mobiles et les petites tablettes donc je pense que en dessous de 767px serait ok.)
  • Il est généralement préférable de travailler "mobile first" (ie. masquer les styles qui s'appliquent seulement à une plus large des dispositifs de derrière les media queries). Il presque toujours à un peu moins de code et les terminaux mobiles plus anciens ne comprennent pas les media queries.
  • Merci pour cette remarque! Je suis aussi un grand fan du premier mobile conception, mais dans cette question, je ne pense pas qu'il était utile de mentionner dans le champ d'application de cette question en particulier.
  • merci....Je suis en train de travailler à un site mobile.
InformationsquelleAutor Gheorgheoiu Nicolae | 2013-04-13
  1. 1

    À donner plus de détails sur la solution donnée par @Simon,

    div.one{
    width:50%;
    min-width:100px;
    float:left;
}
@media screen and (max-width: 767px){
    div.one{ width:100%}
}

    Voir ce violon: http://jsfiddle.net/GraH9/

    Ici est aussi un grand article pour effacer vos concepts en Responsive design, j'ai l'impression que vous trouverez un grand nombre de vos problèmes à l'avenir à résoudre si vous apprendre les tutoriaux ici.

    http://www.hongkiat.com/blog/responsive-web-tutorials/

    InformationsquelleAutor banjoSas