O que a fr unidade do CSS estilo metro do Windows 8 aplicação significa?

Question

Olhando para o seguinte CSS em um estilo metro do Windows 8 aplicação, o que é "fr"?

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

Answer 1

Fica para a "fração" ou "fracionário unidade", uma proposta de unidade de CSS Level 3.

A partir de https://www.w3.org/TR/css3-grid-layout/#fr-unit:

Valores da fração são novas unidades aplicável para a grade, linhas de grade e-propriedades de colunas...A distribuição de frações de espaço ocorre depois de todos ou de conteúdo baseado em tamanhos de linha e coluna ter atingido seu valor máximo.O tamanho total de linhas ou colunas, em seguida, é subtraído o espaço disponível e o restante é dividido proporcionalmente entre as frações de linhas e colunas.

A partir de http://msdn.microsoft.com/en-us/library/windows/apps/hh780610.aspx:

...fracionário (unidade 1FR)...representa uma parte de todo o espaço disponível para a rede depois de tamanho fixo e auto-faixas de tamanho (linhas ou colunas) são definidos.

Também, a partir de http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/:

1fr é um "fracionário unidade", que é uma forma de dizer "o espaço restante no elemento".

Answer 2

A respeito de sua pergunta exata, para este exemplo, vamos supor que o total disponível de largura para as colunas é 1200px.Desde o primeiro largura da coluna é fixo, ele vai ocupar 638px e o espaço restante (562px) será gratuito.Assim, neste caso,

1fr = 562px

Agora vamos supor que seu estilo é o seguinte:-

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

Então, neste caso, o espaço livre restante do 562px será dividido em três partes, e a segunda coluna será dado 1/3º espaço e a terceira coluna será dado 2/3º espaço.