Che cosa significa l'unità fr in una applicazione di stile metro Windows 8 CSS?

Question

Guardando il seguente CSS in un'applicazione in stile metro di Windows 8, cos'è "fr"?

-ms-grid-columns: 638px 1fr; 

Answer 1

'l'acronimo di "frazione" o "unità frazionaria", una proposta di unità in CSS Level 3.

Da https://www.w3.org/TR/css3-grid-layout/#fr-unit:

valori frazionari sono unità nuove applicabili alla grid proprietà righe e colonne-colonne ... La distribuzione dello spazio frazionario si verifica dopo che tutte le dimensioni di righe e colonne basate sul contenuto hanno raggiunto il massimo. La dimensione totale delle righe o delle colonne viene quindi sottratta dallo spazio disponibile e il resto viene suddiviso proporzionalmente tra le righe e le colonne frazionarie.

Da http://msdn.microsoft.com/en-us/library/windows/apps/hh780610.aspx:

... un'unità di frazione (1FR) ... rappresenta una quota di tutto lo spazio disponibile per la griglia dopo dimensione fissa e auto-sized tracce (righe o colonne) sono disposti.

Inoltre, da http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/:

1FR è uno "unità frazionaria", che è un modo di dire "lo spazio rimanente nell'elemento".

Answer 2

Per la tua domanda esatta, per questo particolare esempio, supponiamo che la larghezza totale disponibile per le colonne sia di 1200 px. Poiché la larghezza della prima colonna è fissa, occuperà 638 px e lo spazio rimanente (562 px) sarà libero. Così, in questo caso,

1FR = 562px

Ora supponiamo tuo stile è la seguente: -

-ms-grid-columns: 638px 1fr 2fr; 

Poi, in questo caso, lo spazio libero di 562px sarà diviso in tre parti e alla seconda colonna verrà assegnato 1/3 dello spazio e alla terza colonna verrà assegnato uno spazio di 2/3.