Css 我如何确定不同尺寸tha设备的设计

下面是我的代码和（Genymotion emulator）屏幕截图。屏幕似乎不同，代码相同。例如，Galaxy S2屏幕上的

REGISTER

按钮似乎与Galaxy S3屏幕的位置不同

其中一个屏幕截图来自

Galaxy S2

，另一个来自

Galaxy S3

是否有机会修复具有不同大小和分辨率的设备的屏幕布局

编辑 （我已经替换了以前的代码和schreenshots）

导出默认类登录扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
警报（'已按下登录！'）}
/>
警报（'忘记密码已按下！'）}
/>
警报（'已按下寄存器！'）}
/>
)
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
为内容辩护：“中心”，
填充：10，
},
头像：{
弹性系数：0.4，
高度：空，
宽度：空，
marginLeft:55，
marginRight:55，
},
表格：{
弹性：1
},
最后一个容器：{
玛金托普：25，
},
文本输入：{
尺寸：16，
线高：48，
},
})

---

您可以使用此插件。我个人使用Display.height来调整高度

我想你可以用flex=1将按钮拉到屏幕底部的空按钮：

  <View style={{flex: 1}}></View> <!-- empty spacer view -->
  <View style={styles.lastContainer}>
    <RaisedButton
      style={{marginTop: 36, alignSelf:'stretch' }}
      text='FORGOT PASSWORD'
      onPress={() => alert('Forgot Password has been pressed!')}
    />
    <RaisedButton
      style={{marginTop: 16, alignSelf:'stretch' }}
      text='REGISTER'
      color={'accent'}
      onPress={() => alert('Register has been pressed!')}
    />
  </View>

警报（'忘记密码已按下！'）}
/>
警报（'已按下寄存器！'）}
/>

---

或者，您也可以查看允许在样式中使用百分比值的样式。

谢谢@PatrickKlitzke。我认为Flexbox的flex属性应该像CSS中的百分比一样工作。我错了吗？不是真的，这更像是决定如何分配空闲空间。我建议你看flexbox.io。你可以做一些事情，比如如果你想在底部显示你的控件，我会给你flexbox.io的声誉。再次感谢你。我可以在大约一个半月后返回该问题。是的，帕特里克，你是对的。由于虚拟键盘，我不得不使用显示高度来修复所有控件。在我的例子中，我使用React原生维度api。你说得对！谢谢此外，要理解您的awesome（这似乎是一个完整的解决方案）库需要一些时间。也许下次。。

  <View style={{flex: 1}}></View> <!-- empty spacer view -->
  <View style={styles.lastContainer}>
    <RaisedButton
      style={{marginTop: 36, alignSelf:'stretch' }}
      text='FORGOT PASSWORD'
      onPress={() => alert('Forgot Password has been pressed!')}
    />
    <RaisedButton
      style={{marginTop: 16, alignSelf:'stretch' }}
      text='REGISTER'
      color={'accent'}
      onPress={() => alert('Register has been pressed!')}
    />
  </View>