Question

我是flex的新手。我想开发一个多屏分辨率的应用程序。我无法弄明白我需要做什么。

我读过这篇文章here，但它仍然不清楚我必须做什么。

任何人都可以解释我如何在多种分辨率下保持相同的尺寸和设计？

如何实现密度独立？

例如，我需要为背景图片设置3种不同的分辨率吗？

我的背景图片需要什么屏幕分辨率？

谢谢！

Answer 1

要实现密度独立性并达到多个屏幕分辨率，您需要为任何可能的屏幕做好准备。从低分辨率iPhone 3 / GS到超高分辨率Nexus 10.您的背景图像无需特定的屏幕分辨率，因为它需要有数百种分辨率。

不要将背景设为分辨率，而应考虑使用代码构建背景。通过可重复的图块或使用多个图像并将它们组合在一起形成背景。

您肯定希望为每个Adobe分辨率（160dpi，240dpi和320dpi）使用一个图像。你可以这样做：

<s:Image>
    <s:source>
        <s:MultiDPIBitmapSource
            source160dpi="@Embed('assets/ui/images/phone/info-image-160.png')" 
            source240dpi="@Embed('assets/ui/images/phone/info-image-240.png')" 
            source320dpi="@Embed('assets/ui/images/phone/info-image-320.png')" />
    </s:source>
</s:Image>

假设您在向量中创建了所有内容，这相对简单。只需拍摄你为160设计的图像（这是大多数人设计的图像）并将其放大到240dpi为240dpi，200％为320dpi。

为了实现真正的密度独立性，您还需要确保未在应用程序标记中使用applicationDPI，因为这会强制执行特定的解析。

对于CSS，您应该遵循以下格式（直接从下面的第一个链接获取）

    @media (application-dpi: 160) {

        s|Button {
            fontSize: 10;
        }
    }

    /* IOS only @ 240dpi */
    @media (application-dpi: 240) and (os-platform: "IOS") {
        s|Button {
            fontSize: 11;
        }
    }

    /* IOS at 160dpi or Android @ 160dpi */
    @media (os-platform: "IOS") and (application-dpi:160), (os-platform: "ANDROID") and (application-dpi: 160) {
        s|Button {
            fontSize: 13;        
        }
    }

你需要考虑一切。图像，字体/字体大小，组件大小调整，硬编码组件位置等等。您可以查看Capabilities类，了解运行时可用的数据类型。如果您最终使用stage.stageHeight等内容获取了错误的值，请考虑使用FlexGlobals.topApplication.sys(tem?)Manager.screen.height。这说明了DPI，而stageHeight却没有。

另请阅读：

Support multiple screen sizes and DPI values in a mobile application

为多屏分辨率设计移动应用程序

1 个答案: