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
- http://www.sitepoint.com/web-foundations/max-width-css-property/
- http://css-tricks.com/almanac/properties/m/max-width/
- http://www.impressivewebs.com/min-max-width-height-css/
- http://iversendesign.com/min-max-width-css-properties/
- http://practice.typekit.com/reference/the-magic-of-max-width/
- http://learnlayout.com/max-width.html
- http://friendlybit.com/css/min-width-for-ie-revisited/