CSS min-width
La proprietà CSS3 min-width imposta la larghezza minima di un elemento
La proprietà min-width in CSS3 viene utilizzata per impedire che un elemento diventi più stretto di un certo valore. È particolarmente utile nei layout responsivi, dove è necessario mantenere un minimo di leggibilità e struttura anche su schermi molto piccoli.
Sintassi
Significato dei valori principali:
-
auto: Valore predefinito. La larghezza minima viene calcolata automaticamente in base al contenuto e al contesto.
-
lunghezza: Imposta una larghezza minima fissa, espressa in
px,em,rem, ecc. Esempio:min-width: 300px; -
percentuale (%): Imposta la larghezza minima in base alla larghezza del contenitore padre. Esempio:
min-width: 50%; -
inherit: L’elemento eredita il valore dal suo elemento genitore.
Esempio proprietà: min-width
Codice Esempio: min-width
.min-width-example {
min-width: 300px;
width: 100%;
padding: 20px;
background-color: #e3f2fd;
border: 2px solid #1976d2;
border-radius: 10px;
font-size: 18px;
text-align: center;
margin: auto;
}
Contenuto Esempio: min-width
Esempio di utilizzo di min-width
In questo esempio, la larghezza minima del contenitore è impostata a 300px. Anche se lo schermo è più stretto, il contenitore non sarà mai più stretto di 300px:
CSS e HTML per un contenitore con larghezza minima:
<style>
.min-width-example {
min-width: 300px;
width: 100%;
padding: 20px;
background-color: #e3f2fd;
border: 2px solid #1976d2;
border-radius: 10px;
font-size: 18px;
text-align: center;
margin: auto;
}
</style>
<div class="min-width-example">
Questo elemento ha una larghezza minima di 300px.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.192
