与桌面外观相比，移动设备外观更加轻量化。因此，它们具有许多不同之处；例如：

• 移动设备外观以 ActionScript 编写。在移动设备上，完全以 ActionScript 编写的外观可以提供最佳的性能。

• 移动设备外观扩展了 spark.skins.mobile.supportClasses.MobileSkin 类。该类扩展了 UIComponent，而 SparkSkin 类则扩展了 Skin 类。

• 移动设备外观使用已编译的 FXG 或简单的 ActionScript 图形作为图形资源，用以提高性能。而在桌面应用程序的外观中，通常使用 MXML 图形来组成大多数绘图。

• 移动设备外观无需声明任何外观状态。由于手机外观以 ActionScript 编写，因此必须通过过程来实现状态。

• 移动设备外观不支持状态转换。

• 移动设备外观通过手动布置。移动设备外观不扩展 Group，所以不支持 Spark 布局。因此，需要以 ActionScript 手动放置其子代。

• 移动设备外观并不支持所有样式。移动设备主题会忽略某些样式，具体取决于移动设备外观的性能或其它不同点。

移动设备外观通常会声明一个公共的 hostComponent 属性。该属性不是必需的，但建议使用。hostComponent 属性必须与使用外观的组件属于同一类型。例如，ActionBarSkin 将 hostComponent 声明为 ActionBar 类型：

public var hostComponent:ActionBar;

下表定义了使用移动设备主题时可供组件使用的样式属性：

如果希望使用高级 CSS id 选择器设置外观部件的样式，则外观必须也设置外观部件的 id 属性。例如，ActionBar 的 titleDisplay 外观部件设置 id 属性，以便可以使用高级 CSS 设置其样式；例如：

@namespace s "library://ns.adobe.com/flex/spark"; 
s|ActionBar #titleDisplay { 
    color:red; 
}

要更改主题，请使用 theme 编译器参数来指定新的主题；例如：

-theme+=myThemes/NewMobileTheme.swc

外观的表现取决于 currentState 属性的值。例如，在移动设备 ButtonSkin 类中，currentState 属性的值决定着使用哪个 FXG 类作为边框类：

if (currentState == "down") 
    return downBorderSkin; 
else 
    return upBorderSkin;

以下桌面示例显示了不同 DPI 时 CheckBox 外观所使用的不同图形：

<?xml version="1.0"?>
<!-- mobile_skins/ShowCheckBoxSkins.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:skins160="spark.skins.mobile160.assets.*"
    xmlns:skins240="spark.skins.mobile240.assets.*"
    xmlns:skins320="spark.skins.mobile320.assets.*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <!-- 
    NOTE: You must add the mobile theme directory to source path 
    to compile this example.
    
    For example: 
    mxmlc -source-path+=\frameworks\projects\mobiletheme\src\ ShowCheckBoxSkins.mxml
    -->

    <s:Label text="160 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins160:CheckBox_down/>
        <skins160:CheckBox_downSymbol/>
        <skins160:CheckBox_downSymbolSelected/>
        <skins160:CheckBox_up/>
        <skins160:CheckBox_upSymbol/>
        <skins160:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <mx:Spacer height="30"/>

    <s:Label text="240 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins240:CheckBox_down/>
        <skins240:CheckBox_downSymbol/>
        <skins240:CheckBox_downSymbolSelected/>
        <skins240:CheckBox_up/>
        <skins240:CheckBox_upSymbol/>
        <skins240:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <mx:Spacer height="30"/>

    <s:Label text="320 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins320:CheckBox_down/>
        <skins320:CheckBox_downSymbol/>
        <skins320:CheckBox_downSymbolSelected/>
        <skins320:CheckBox_up/>
        <skins320:CheckBox_upSymbol/>
        <skins320:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <s:Label text="down, downSymbol, downSymbolSelected, up, upSymbol, upSymbolSelected"/>

</s:Application>