HTML5学习_day12(3)--响应式布局

响应式布局设计的一般步骤

第一步：在head标签内设置meta标签

第二步：在style标签内通过媒体查询来设置meta query

meta query 是响应式设计的核心，它能够跟浏览器进行沟通，浏览应该呈现什么样的布局。

iphone3gs

当屏幕小于320px时执行里面的样式

@media only screen and (min-width: 100px) and (max-width: 320px) {

选择器{

样式

}

}

例子：

样式{----} 这里的样式在下面情况都不匹配时，使用这个样式。

@media only screen and (max-width: 320px){css样式} 这个样式在浏览器宽度小于320px适用

@media only screen and(min-width: 320px) and (max-width: 480px) { css样式  }这个样式在浏览器宽度大于320px且小于480px适用

第三部设置字体样式

一般来说字体直接调用下面的代码就行了

响应式布局应该注意的地方：

1.使用百分比

2.图片也要组成响应式图片(通过max-width)

img{

width:100% 这个图片无限拉伸  导致图片会失真

max-width:100% 这个图片就可以最大显示 不会失真

}

例子：

meta标签的另一种使用方式

意思是当浏览器的分辨率大于960px的 就应用res.css文件中的样式

页面代码：

	
		
		
		
		
		
		
		
		
	
	
		
		

			
1
			
2
			
3
			
4
			
5
			
6
		
	

res.css代码

#wrap:after{
					content: "";
					display: block;
					clear: both;
				}
				#wrap div{
					width: 32%;
					height: 100px;
					background: blue;
					margin-bottom: 10px;
					float: left;
				}
				#wrap .div2,#wrap .div5{
					margin-left: 2%;
					margin-right: 2%;
				}

res1.css代码

			#wrap:after{
					content: "";
					display: block;
					clear: both;
				}
				.div1,.div3,.div5{
					width: 49%;
					height: 100px;
					background: blue;
					margin-bottom: 10px;
					float: left;
				}
				.div2,.div4,.div6{
					width: 49%;
					height: 100px;
					background: blue;
					margin-bottom: 10px;
					float: right;
				}

res2.css代码

			#wrap div{
					width: 100%;
					height: 100px;
					background: blue;
					margin-bottom: 10px;
				}