jquery - 调整窗口大小时调整 Div 大小

Question

你好朋友我带着困惑来到这里我发现一个网页包含两个容器，一个是左侧，第二个是右侧，当我在一个限制右侧 div 移动到左侧 div 下方后重新使用浏览器的宽度时，它非常奇怪对我来说，我第一次看到这个我试图弄清楚他们是怎么做到的，但没有得到相同的结果。只需通过链接http://jquerymobile.com/demos/1.2.0-pre/

我希望你们能理解我要解释的内容。只需打开链接并在限制后减少浏览器的宽度，您就可以看到我在说什么

请分享您的看法

提前致谢 ......

Answer 1

他们使用CSS 媒体查询。

http://jsfiddle.net/xPMqm/1/

HTML：

<div id="chameleon"></div>​

CSS：

#chameleon{
    width:100px;
    height:100px;
    background-color:yellow;
}

@media all and (min-width:600px) {
    #chameleon{
        background-color: blue;
        height: 200px;
    }
}

@media all and (min-width:800px) {
    #chameleon{
        background-color: green;
        height:300px;
    }
}

@media all and (min-width:1000px) {
    #chameleon{
        background-color: orange;
        height: 400px;
    }
}


​

Answer 2

它被称为响应式网页设计。您可以为所有不同的屏幕尺寸创建一个网站。（桌面、标签和移动设备。）

可以通过应用媒体查询来控制布局，其中根据屏幕宽度指定 css。

例如：@media screen and (min-width: 900px) { .class { background: #666; } }

这里媒体类型是屏幕，指定的 css 将应用到宽度为 900 像素或更多。一旦屏幕宽度小于 900px，媒体查询中指定的 css 就不会被应用。