Question

你好朋友我来这里有一个困惑我找到一个网页，其中coniatins两个容器一个是左侧，第二个是右侧当我减少浏览器的宽度后一个限制右侧div移动beneth左侧div这对我来说非常奇怪，我第一次看到这个，我试图弄清楚他们是怎么做到这一点但是结果得到相同的结果。只需浏览http://jquerymobile.com/demos/1.2.0-pre/

链接即可

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

请分享您的观点

提前致谢......

Answer 1

他们使用CSS media queries。

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和（min-width：900px）{ .class { 背景：＃666; } }

此处媒体类型为屏幕，指定的css将应用，直到宽度为900px或更高。一旦屏幕宽度小于900px，就不会应用媒体查询中指定的css。

窗口调整大小时Div重新调整大小

2 个答案: