<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>�ޱ����ĵ�</title> 
<style> 
.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px}  
} 
/* css ע��˵�����������������Ȳ�С��1201pxʱ abc ��ʾ1200px��� */ 
 
@media screen and (max-width: 1200px) { 
.abc {width: 900px}  
} 
/* �������������Ȳ�����1200pxʱ abc ��ʾ900px��� */ 
 
@media screen and (max-width: 900px) { 
.abc {width: 200px;}  
} 
/* �������������Ȳ�����900pxʱ abc ��ʾ200px��� */ 
 
@media screen and (max-width: 500px) { 
.abc {width: 100px;}  
} 
/* �������������Ȳ�����500pxʱ abc ��ʾ100px��� */  
</style> 
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="abc">DIVCSS5ʵ���������DIV��Ȼ����������ȱ仯Ŷ�����Ըı���������</div> 
</body> 
</html> 
