7.3　尺寸样式

这一步，我们要定义tile的尺寸样式了。标准的Win8磁贴片有5个不同的大小，分别是：标准大小（120×120）、50%大小（55×55）、2倍大小（120×250）、3倍大小（120×380）、4倍大小（120×510）。另外，针对放大磁贴，还提供了垂直方向的显示效果，分别是：垂直2倍（250×120）、垂直3倍（380×120）、垂直4倍（510×120）。

读者可能比较奇怪，2倍大小的尺寸应该是240px才对，为什么是250px？这是因为，在Win8里，所有的磁贴片不论大小如何，都应该进行对齐，所以如果是2倍，就应该把两个标准磁贴片之间的margin间隔也应该算上，才能对齐，对齐效果如图7-3所示。2倍公式为：120×2+10=250px；同理3倍尺寸的话，应该加2个margin间隔，公式为：120×3+10×2=380px。

7.3　尺寸样式 - 图1 图7-3　不同尺寸的磁贴对齐效果

尺寸样式的实现方式比较简单，就只是改变所需要的高度和宽度而已。代码如下：

  1. /* 50%大小 */
  2. .tile.half { width: 55px; height: 55px;}
  3.  
  4. /* 2倍大小 */
  5. .tile.double { width: 250px;}
  6.  
  7. /* 3倍大小 */
  8. .tile.triple { width: 380px;}
  9.  
  10. /* 4倍大小 */
  11. .tile.quadro { width: 510px;}

同理，如果要定义垂直倍数的样式，只需要修改高度即可。代码如下：

  1. /* 垂直2倍大小 */
  2. .tile.double-vertical { height: 250px;}
  3.  
  4. /* 垂直3倍大小 */
  5. .tile.triple-vertical { height: 380px;}
  6.  
  7. /* 垂直4倍大小 */
  8. .tile.quadro-vertical { height: 510px;}

至此，有了基本样式，也有了颜色样式，而且尺寸样式也定义了，应该可以组合出任意酷炫的磁贴片效果了。