Lez.7 - Corso Intermedio Css

MIN WIDTH - MAX WIDTH - Misure minimo e massimo, le proprietà min-width e max-width nel foglio di stile Css

Lo Spazio degli Oggetti min-width e max-width

Per avere piena padronanza dello spazio che occupa un'oggetto è importante definire un limite entro il quale l'oggetto si può muovere. Questo serve a poter contenere la grandezza entro certi limiti, fissati da noi, di un elemento al variare della misura dello schermo del dispositivo.

Nel codice sottostante vediamo che:
assegnando al div delle misure di minimo e massimo per la larghezza, affermiamo che la larghezza sarà del 50% del suo contenitore, ma nello stesso tempo non sarà mai inferiore a 200px e mai superiore a 400px.

Se provate a diminuire la grandezza del vostro schermo noterete che la larghezza del div si ridurrà, ma solo fino alla misura di 200px; mentre se ingrandite lo schermo, la larghezza del div si allargherà, ma solo fino a 400px, poi la sua larghezza rimarrà fissa indipendentemente da quanto ingrandirete lo schermo.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>MIN WIDTH - MAX WIDTH</title>
  <meta charset="utf-8">
  <style type="text/css">
	div {
	  	background-color: cyan;
	  	width: 50%;
	  	min-width: 200px;
	  	max-width: 400px;
  	  }
  </style>
 </head>
 <body>			    
	<h1>Dimensioni massime e minime</h1>
	<div>
	  <p>Testo riempitivo per mettere in evidenza le dimensioni massime e minime di questo div. Testo riempitivo per mettere in evidenza le dimensioni massime e minime di questo div.</p> 
	  <p>Testo riempitivo per mettere in evidenza le dimensioni massime e minime di questo div. Testo riempitivo per mettere in evidenza le dimensioni massime e minime di questo div.</p>
	</div>
 </body>               
</html>