如何仅使用CSS动态调整布局

Question

根据应用程序接口的大小，我需要仅使用CSS动态调整布局。 这将有可能吗？

如果我的应用程序的宽度为500像素，我想用这种方式来显示3个容器：

  | A B | // width 500px 
      | C | 

如果我的应用程序的宽度为750px，我想显示第3容器采用这种方式：

  | A B C | // width 750px 

这是example。

通过单击按钮“更改应用程序大小”，您可以更改容器的大小。

Answer 1

使用CSS媒体查询：如果浏览器不支持CSS媒体查询

<link type="text/css" rel="stylesheet" href="style.css" />  
<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/mobile-500.css" /> 
<link rel="stylesheet" media="screen and (max-width: 750px)" href="css/mobile-750.css" /> 

Answer 2

使用CSS3媒体查询，是的，你可以。

@media (min-width:500px) { ... } 

有关更多信息，请参阅http://www.w3.org/TR/css3-mediaqueries/。

Answer 3

你可能会想看看CSS媒体查询。看看这个链接 - http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/