页面响应式布局CSS样式通用代码

作者：管理员

发布时间：2013/6/13 11:51:36

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=283

 #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; }
 }