调整窗口大小时调整大小

问题描述：

你好朋友我来这里混淆我发现一个网页coniatins两个容器一个是左侧，第二个是右侧当我缩小浏览器的宽度后一个limiit右侧div感动beneth左侧div对我来说很奇怪，我第一次看到这一点，我试图弄清楚他们是如何做到这一点，但却得到了相同的结果。只需通过链接http://jquerymobile.com/demos/1.2.0-pre/调整窗口大小时调整大小

我希望你们明白我想说明的是什么。只需打开链接并降低了浏览器的宽度后限制你可以看到什么我谈论

请提前分享您的意见

感谢......

答

他们用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; 
    } 
}

为获得更多乐趣将垂直分隔线左右拖动:) –

其惊人的感谢您的帮助@Mythril还有一件事是这个支持所有浏览器.. – Kamal

请教[CanIUse]（http://caniuse.com/#feat = css-mediaqueries），你可以处理所有的功能渗透知识:)。 –

答

其所谓的自适应网页设计。您可以创建所有不同屏幕尺寸的网站（桌面，标签和移动设备）。

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

例如： @media screen and（min-width：900px）{ .class { background：＃666; } }

这里的媒体类型是屏幕，指定的CSS将适用，直到宽度为900px或更多。只要屏幕宽度小于900px，媒体查询中指定的CSS就不会应用。

调整窗口大小时调整大小

相关推荐