页面响应式布局CSS样式通用代码
技术支持服务电话：15308000360 【7x24提供运维服务，解决各类系统/软硬件疑难技术问题】
<style type="text/css">
#container { width: 960px; margin: auto; }
#wrap { width: 740px; float: left; }
p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
#main { width: 520px; float: right; background: yellow; }
#sub01 { width: 200px; float: left; background: orange; }
#sub02 { width: 200px; float: right; background: green; }
/*--窗口1000px以上--*/
@media screen and (min-width: 1000px)
{
#container { width: 1000px; }
#wrapper { width: 780px; float: left; }
#main { width: 560px; float: right; }
#sub01 { width: 200px; float: left; background: orange; }
#sub02 { width: 200px; float: right; background: green; }
}
/*--窗口640px以上、999px以下--*/
@media screen and (min-width: 1000px) and (max-width: 999px)
{
#container { width: 640px; }
#wrapper { width: 640px; float: none; }
#main { width: 420px; float: right; }
#sub01 { width: 200px; float: left; background: orange; }
#sub02 { width: 100%; float: right; background: green; }
}
/*--窗口639px以下*/
@media screen and (min-width: 1000px) and (max-width: 999px)
{
#container { width: 100%; }
#wrapper { width: 100%; float: none; }
#main { width: 100%; float: right; }
#sub01 { width: 100%; float: left; background: orange; }
#sub02 { width: 100%; float: right; background: green; }
}
</style>
