min-width, max-width

8 Ekim 2014

Bu özellikler blok-level ve yerine konulabilir element(örneğin resim) içerik alanının asgari / azami genişliğini tanımlar. max-width margin, padding ve kenarlıkları içermez.

width değeri daha geniş olsa bile max-width değerini aşamaz. Bu ilginç bir kuraldır. Ancak min-width değeri eğer max-width değerinden büyükse bu değeri uygular, yani min-width değeri baskındır.

min-width ve min-height element genişliğinin belirli bir aralıkta olması için beraber kullanılır.

max-width ve width ilişkisi

max-width ve width aynı elemente ayı değerlerde uygulanmamalıdır, birisi diğerine baskın olur. Örneğin width değeri 150px ve max-width değeri 60px olarak atanmışsa

.alan{
    max-width: 60px;
    width:150px;
}

Tanımında width tanımı anlamsız kalır. Şöyle bir kullanım ise mantıklıdır.

.alan{
    max-width: 120px;
    width:80%;
}

Genişliği en fazla 120px olan bir elemanımız var. Elemanımızın genişliği kapsayıcı elemanın % 80’i kadardır.

## Uyumlu(Responsive) resim ve max-width

Esnek bir resim boyutu sağlamak için max-width değerini %100 ve height:auto tanımlamak gerekir.

img {
    max-width: 100%;
    height: auto;
}

kodu tüm uyumlu web kodlarında mevcuttur.

min-width ipucu

Mesela bir site genişliğini yüzde olarak vermek istiyoruz ama belli genişlikten daha küçük olması durumunda içeriğin büzülmesini istemiyoruz.

.ana-kapsayici {
    width:90%;
    min-width:600px;
}

tanımı bu işimizi görür. Zamanında bunun için javascript kodu yazardık. Hey gidi günler.

Uyumlu web kodlarken max-width özelliğinin çok kullanışlı tarafından yararlanıyoruz.

## Kaynaklar

Javascript ile medya kontrolü

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.{% highlight css %}/* Smartphones (portrait) ----------- [email protected] only screen an...… Devamını oku

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.

CSS ile çıktı alırken sayfa sonunu belirlemek

30 January 2017 tarihinde yayınlandı.