ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

5 TRUCCHI CSS UTILI PER IL RESPONSIVE DESIGN

Argomenti: , , , ,

Autore: Andrea Baccolini

5 trucchi utili per il responsive design
Ago
18
2012

Progettare un design reattivo, ma mantenendo gli elementi visivi esteticamente equilibrati su tutti i layout breakpoint (lett. punti di interruzione”, passaggi) è un’arte.
Oggi ho intenzione di condividere 5 dei miei CSS tricks comunemente usati insieme a casi di esempio per la codifica di disegni reattivi.
Essi sono semplici proprietà CSS come il min-width, max-width, overflow e relativo valore — ma queste proprietà svolgono un ruolo importante nel design reattivo.

1. Video Responsive (demo)
Questo trucco CSS per il video reattivo è stato scoperto da tjkdesign.com.
Esso fa in modo di incorporare il video alla massima larghezza.

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

2. Min & Max Width (demo)

La proprietà “max-width” consente di impostare la larghezza massima dell’elemento.
Lo scopo di max-width è di impedire che l’elemento che si estenda oltre il bordo del contenitore.

Max-Width Container
Nell’esempio riportato di seguito, è possibile specificare che il contenitore può misurare 800px se possibile, ma non deve superare il 90% della larghezza del contenitore.

.container {
width: 800px;
max-width: 90%;
}

Il codice CSS reattivo sopra funziona su IE7 e IE9, ma non funziona su IE8.
Per risolvere il problema, aggiungere larghezza: auto.
Si può applicare un CSS condizionale appositamente per IE8 o utilizzare l’hack IE qui sotto:

@media \0screen {
img {
width: auto; /* for ie 8 */
}
}

Min-Width
Min-width è opposto a max-width.
Imposta la larghezza minima di un elemento.
Nel modulo di esempio qui sotto, min-width è usato sul campo di testo di input per prevenire che l’input diventi troppo piccolo quando si ridimensiona.

5 Trucchi CSS utili per il Responsive Design

 

3. Valori relativi (demo)

Responsive design, sapere quando utilizzare il valore relativo può semplificare il CSS e massimizzare il miglior risultato di layout. Di seguito sono riportati alcuni esempi.

Margine relativo
Qui di seguito posto un esempio di un commentlist dove il margine relativo sinistro viene utilizzato per distanziare i commenti filettati.
Invece di utilizzare il valore di pixel fisso, ho usato il valore percentuale per distanziare le sottoliste.
Come mostrato sul lato sinistro della schermata, la casella del contenuto nelle sottoliste che si ottiene è molto piccola sulla risoluzione mobile se è stato utilizzato il margine sinistro in pixel.

5 Trucchi CSS utili per il Responsive Design

Dimensione del carattere relativa
Con valore relativo (es. em o %), la dimensione del carattere, line-height e spaziatura del margine possono essere ereditate.
Per esempio, posso cambiare la dimensione del carattere su tutti gli elementi discendenti semplicemente cambiando la dimensione del carattere dell’elemento padre.

5 Trucchi CSS utili per il Responsive Design

Padding Relativo
La schermata qui sotto mostra che è meglio utilizzare la percentuale nel padding relativo rispetto a spaziatura fissa in pixel.
Il box a sinistra mostra uno spazio padding sbilanciato se è stato utilizzato il pixel.
Il box con il padding in percentuale sulla destra mostra che l’area del contenuto viene ingrandita.

5 Trucchi CSS utili per il Responsive Design

 

4. Overflow: hidden trucco (demo)

E’ possibile cancellare il “float” con la proprietà overflow.
Questo trucco è estremamente utile.
È possibile cancellare il “float” dall’elemento precedente e mantenere il contenuto all’interno del contenitore mediante l’applicazione di overflow: hidden.

5 Trucchi CSS utili per il Responsive Design

 

5. Word-break (demo)

È possibile forzare il testo unbreaking (es. testo URL lungo) a capo invece di correre in una sola riga.

.break-word {
word-wrap: break-word;
}

(traduzione dell’articolo “5 Useful CSS Tricks for Responsive Design” del blog “web designer wall“)

 

 

5 TRUCCHI CSS UTILI PER IL RESPONSIVE DESIGN ultima modifica: 2012-08-18T18:05:49+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

5 commenti

  1. francesco scrive:

    Complimenti articolo molto, molto interessante e molto chiaro.

      Quote

  2. Cesco scrive:

    Ciao Andre, ma la proprietà se non erro dovrebbe essere

    word-break:break-all;

    o sbaglio?

      Quote

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.