Nella progettazione di un sito web, un bravo web designer deve tener conto della ormai grande varietà di dispositivi con il quale sarà possibile visualizzare il sito, questo significa che il sito verrà visitato da dispositivi con risoluzioni molto diverse tra loro.

I siti di ultima generazione quindi vengono in modo RESPONSIVO, ovvero siti che cambiano struttura in base alla risoluzione del dispositivo.

Per fare ciò esistono molte tecniche, sta al web designer utilizzare la migliore per ogni situazione.

Una funzione a mio parere molto utile al riguardo è “CALC()”, grazie alla quale è possibile effettuare calcoli direttamente nel foglio di stile, mischiando quaslasi unità di misura. Vediamo subito un esempio:

width: CALC(100% – 10px);

Questa funzione setterà la larghezza al 100% e sottrarrà 10px dalla dimensione trovata. Quindi, supponendo che il sito viene visualizzato da un dispositivo con questa risoluzione: 1280×1024, il valore della proprietà risulterà:

1280 – 10px = 1270px;

Oltre a semplici operazioni, la funzione calc offre la possibilità di svolgere operazioni più complicate e con più fattori, inoltre, ovviamente può essere utilizzata per settare il valore numerico di qualsiasi proprietà.

Ecco vari esempi di utilizzo:

margin: calc(2vw + 50% / 3);
padding: 10px calc(3% – 2px);
width: calc(100% – 10px + 2vw);

Fino a poco tempo fa dovevamo ricorrere al javascript per questa o altre funzioni mentre adesso il CSS da solo ci permette di creare degli stili spettacolari, dinamici e adatti a qualsiasi dispositivo.

Buon lavoro 🙂