CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

min-width: valore;

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

CODE: CSSpreleva codice
  1. .min-width-example {
  2.   min-width: 300px;
  3.   width: 100%;
  4.   padding: 20px;
  5.   background-color: #e3f2fd;
  6.   border: 2px solid #1976d2;
  7.   border-radius: 10px;
  8.   font-size: 18px;
  9.   text-align: center;
  10.   margin: auto;
  11. }

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:


Questo elemento ha una larghezza minima 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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies