Proprietatea CSS max-width
Proprietatea max-width setează cea mai mare lățime pe care o poate avea un element. Elementul poate fi mai îngust decât această valoare, dar niciodată mai lat.
Este utilă pentru layout-uri responsive și pentru a păstra conținutul lizibil pe diferite dimensiuni de ecran.
Problema cu width: Un <div> centrat, cu o lățime fixă, precum 600px, va depăși marginile atunci când fereastra browserului este mai îngustă decât acea lățime, iar browserul poate adăuga o bară de derulare orizontală.
Folosind max-width în schimb: Setarea max-width gestionează mai bine ferestrele mici, deoarece elementul se micșorează pentru a se încadra, în loc să depășească marginile.
Exemplu
Un div folosește un width fix, iar celălalt folosește max-width, astfel încât doar al doilea se micșorează pe o fereastră îngustă.
<style>, creează div.ex1 cu lățime 500px, margin auto și un chenar de 3px solid verde; și div.ex2 cu max-width 500px, margin auto și același chenar. Adaugă un div din fiecare clasă cu text. Pe o fereastră îngustă, div-ul cu lățime fixă depășește marginile, în timp ce div-ul cu max-width se micșorează.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div has a width of 500px and margin set to auto.</div>
<br>
<div class="ex2">This div has a max-width of 500px and margin set to auto.</div>
<p>Resize the browser window to less than 500px wide to see the difference.</p>
</body>
</html>
Proprietăți CSS
Un rezumat al proprietăților de aici:
max-width— setează lățimea maximă a unui element.width— setează lățimea unui element.