Question

我将在Android上运行我的GWT生成的Java脚本文件，并且我试图让我的UI看起来一样，无论移动屏幕的大小如何。我的大多数视图都有5到6个小部件，按钮，文本框。我现在把它们放在FlexTable中但也许有更好的方法来布置小部件？然而，我的主要问题是如何使用CSS来布局我的小部件，以使所有屏幕尺寸的外观和感觉相同。这有可能使用CSS吗？如果是这样，任何人都会有任何专注于小部件定位的CSS示例吗？

Answer 1

对于各种屏幕尺寸的GWT（以及处理横向，纵向旋转），我使用媒体查询。通过这种方式，您可以为每个屏幕大小定义css规则。

例如，在下面的例子中，我从不需要myContentPanel大于450，但这对于iPhone / Android纵向视图来说太大了：

@media all and (max-width: 10024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

这是一个更完整的CSS示例http://snipplr.com/view/67341/

在这里使用jQuery有一个很棒的教程http://css-tricks.com/resolution-specific-stylesheets/

您可以在此处查看更多内容： http://css-tricks.com/css-media-queries/

GWT app在移动设备上运行

1 个答案: