CSS Windows8城域应用程序中的fr单元意味着什么



在Windows8 metro风格的应用程序中查看以下CSS,什么是"fr"?

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

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

1fr=562px

现在让我们假设您的样式如下:-

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

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

它代表"分数"或"分数单位",是CSS Level 3中建议的单位。

发件人https://www.w3.org/TR/css3-grid-layout/#fr-单位:

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

发件人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是一个"分数单位",这是一种表示"元素中剩余空间"的方式。

最新更新