在Flex手机应用中使用media规则

有时,开发人员希望对不同的平台设备和设备配置(如不同的DPI)使用不同的样式,我们可以在样式表中使用@media规则做到这一点。

@media规则是 CSS 规范的一部分;Flex 扩展了此规则,将额外的属性application-dpi和os-platform包括进来。通过这些属性,可以根据应用程序DPI和运行应用程序的平台来选择性地应用样式。

Flex支持两种CSS选择器。第一种针对操作平台。下面的代码演示了在不同平台下为标签选择不同的字体颜色。

@namespace s "library://ns.adobe.com/flash/spark";
@media (os-platform: "IOS") {
  s|Label
  {
  color: red;
  }
}
@media (os-platform: "Android") {
  s|Label {
  color: blue;
  }
}

第二种针对DPI。下面的代码演示了在不同DPI下为按钮选择不同的字体大小。

@namespace s "library://ns.adobe.com/flash/spark";
@media (application-dpi: 160) {
  s|Button {
  fontSize: 10;
  }
}
@media (application-dpi: 240){
  s|Button {
  fontSize: 11;
  }
}
@media (application-dpi: 320){
  s|Button {
  fontSize: 12;
  }
}

另外,@media规则还支持运算符“and” 和“not”。同时还支持以逗号分隔的列表。如果以逗号分隔表达式,意味着各项之间是“or” 的关系。

发表评论