如何僅使用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/