在Windows 8 metro样式应用程序中的fr单元是什么意思？

在Windows 8 metro样式应用程序中查看以下CSS，什么是“fr”？

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

Answer 1

它代表“分数”或“分数单位”，这是CSS级别3中的build议单位。

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

分数值是适用于网格行和网格列属性的新单位…分数空间的分布发生在全部或基于内容的行和列的大小达到其最大值之后。 然后从可用空间中减去行或列的总大小，其余部分在小数行和列之间按比例分配。

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

…分数单位（1FR）…表示固定大小和自动大小的轨道（行或列）布局后，可用于网格的所有空间的一个份额。

此外，从http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/ ：

1fr是一个“分数单位”，这是一种说“元素剩余空间”的方式。

Answer 2

关于你确切的问题，对于这个特定的例子，让我们假设列的总可用宽度是1200px。 由于第一列的宽度是固定的，它将占用638px，剩余的空间（562px）将是空闲的。 因此，在这种情况下，

1fr = 562px

现在让我们假设你的造型如下：

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

那么在这种情况下，剩余的562px的自由空间将被分成三部分，第二列将被给予1/3的空间，第三列将被给予2/3的空间。