html响应式布局，css响应式布局，响应式布局入门

html响应式布局，css响应式布局，响应式布局入门

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月25日 15:31:51 星期一

http://fanshuyao.iteye.com/

 

一、效果如下：

1、当屏幕宽度大于或等于960px时，显示为：

 

2、当屏幕宽度小于960px且大于640px时，显示为：

 

3、当屏幕宽度小于640px时，显示为：

 

 

二、代码：

 

1、Html页面代码：

需要注意的是引入的link：

里面使用了Media属性：

media="screen and (min-width:641px) and (max-width: 959px)"

 

完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>












	

		
myheader
		

			
left
			
middle
			
right
		
		
footer
	

 

2、Css代码：

index.css

默认样式。

@CHARSET "UTF-8";
body{
	margin: 0;
	padding: 0;
}
.container{
	width: 960px;
	font-size: 14px;
	color: #fff;
	margin: 5px auto;
}
.myheader{
	background-color: gray;
	height: 50px;
}
.left,.middle,.right{
	height: 400px;
}
.left{
	width: 100px;
	background-color: green;
	float: left;
	margin-right: 10px;
}
.middle{
	width: 640px;
	background-color: #bbb;
	float: left;
}
.right{
	width: 200px;
	background-color: maroon;
	float: right;
}
.myfooter{
	background-color: black;
	height: 30px;
	clear: both;
}

 

index-960.css

表示大于等于960px显示的样式。

这个和默认的css样式是一样的，没有区别，因为默认就是用浏览器查看，宽度大于大于等于960px，这样index-960.css可以省略。

@CHARSET "UTF-8";
body{
	margin: 0;
	padding: 0;
}
.container{
	width: 960px;
	font-size: 14px;
	color: #fff;
	margin: 5px auto;
}
.myheader{
	background-color: gray;
	height: 50px;
}
.left,.middle,.right{
	height: 400px;
}
.left{
	width: 100px;
	background-color: green;
	float: left;
	margin-right: 10px;
}
.middle{
	width: 640px;
	background-color: #bbb;
	float: left;
}
.right{
	width: 200px;
	background-color: maroon;
	float: right;
}
.myfooter{
	background-color: black;
	height: 30px;
	clear: both;
}

 

index-641-959.css

表示大于640px且小于960px显示的样式。

@CHARSET "UTF-8";
.right{
	display: none;
}
.middle{
	width: 850px;
}

 

index-640.css

表示小于或等于640px显示的样式。

@CHARSET "UTF-8";
.left,.right{
	display: none;
}
.middle{
	width: 100%;
}

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2016年7月25日 15:31:51 星期一

http://fanshuyao.iteye.com/