bootstrap css dosyasını incelerseniz çok güzel bir şekilde ve anlaşılır olarak yazılmıştır. size güzel kaynak olabilir.



http://maxcdn.bootstrapcdn.com/boots.../bootstrap.css

@media (min-width: 992px) {

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

    float: left;

  }

  .col-md-12 {

    width: 100%;

  }

  .col-md-11 {

    width: 91.66666667%;

  }

  .col-md-10 {

    width: 83.33333333%;

  }

  .col-md-9 {

    width: 75%;

  }

  .col-md-8 {

    width: 66.66666667%;

  }

  .col-md-7 {

    width: 58.33333333%;

  }

  .col-md-6 {

    width: 50%;

  }

  .col-md-5 {

    width: 41.66666667%;

  }

  .col-md-4 {

    width: 33.33333333%;

  }

  .col-md-3 {

    width: 25%;

  }

  .col-md-2 {

    width: 16.66666667%;

  }

  .col-md-1 {

    width: 8.33333333%;

  }

}

yukarıdaki örnekte col-md-* için değerleri görebilirsiniz.

ekran boyuturu 992px den büyük ise bu şekilde davranacaktır.

md (medium) olduğu için 992px in altındaki ekran boyutunda %100 olacaktır.

yukarıdaki örneğe göre istediğin ekran boyutları arasında istediğin div in alabileceği değerleri belirtebilirsin.



Örnek birkaç @media özelliği



Maximum 767px ekran boyutuna kadar nasıl görüneceği

@media (max-width: 767px) {

...

..

}

992px ile 1199px arasında nasıl görüneceği

@media (min-width: 992px) and (max-width: 1199px) {

....

..

}

Minimum 1200px de nasıl görüneceği

@media (min-width: 1200px) {

....

..

}