SOURCE

<div>
			<!--lorem是产生模拟数据的方法-->
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero odit unde reiciendis nostrum delectus sint cupiditate iste dolorem! Corrupti aut hic aperiam blanditiis doloribus nobis ut libero placeat ullam facilis.
		</div>

<style type="text/css">
			@media only screen and (max-width: 320px) {
				/*下面写320px设备下的css*/
				div{
					background-color: blue;
				}
			}
			/*321到640之间的CSS，背景颜色变红色*/
			@media only screen and (min-width: 321px) and (max-width: 640px) {
				div{
					background-color: red;
				}
			}
			/*641到1002之间的CSS，背景颜色变黄色*/
			@media only screen and (min-width: 641px) and (max-width: 1002px) {
				div{
					background-color: yellow;
				}				
			}
			/*1003以上的CSS,，背景颜色变黑色，文字变白色*/
			@media only screen and (min-width:1003px){
				div{
					background-color: black;
					color: white;
				}
			}
		</style>