Question

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

如果我的应用程序的宽度是500px，我想以这种方式显示3个容器：

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

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

            |  A  B  C  | // width 750px

这是example。

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

Answer 1

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

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

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

Answer 2

使用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 3

您可能希望查看css媒体查询。查看此链接 - http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

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

3 个答案: