我对 flex 真的很陌生。我想开发一个多屏分辨率的应用程序。我无法弄清楚我需要做什么。
我在这里阅读了这篇文章,但仍然不清楚我必须做什么。
谁能解释我如何在多种分辨率下保持相同的尺寸和设计?
我怎样才能实现密度独立?
例如,我是否需要为背景图片设置 3 种不同的分辨率?
我的背景图像需要什么屏幕分辨率?
谢谢!
我对 flex 真的很陌生。我想开发一个多屏分辨率的应用程序。我无法弄清楚我需要做什么。
我在这里阅读了这篇文章,但仍然不清楚我必须做什么。
谁能解释我如何在多种分辨率下保持相同的尺寸和设计?
我怎样才能实现密度独立?
例如,我是否需要为背景图片设置 3 种不同的分辨率?
我的背景图像需要什么屏幕分辨率?
谢谢!
要实现密度独立并达到多种屏幕分辨率,您需要为任何可能的屏幕做好准备。从低分辨率 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 的 150% 和 320dpi 的 200%。
对于真正的密度独立性,您还需要确保您没有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 没有。
另请阅读: