SOURCE

<div>
			<!--lorem是产生模拟数据的方法-->
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatem corporis dolore alias voluptatum eligendi error doloremque nostrum quam possimus hic architecto ipsam veritatis. Nisi eligendi quae architecto doloribus molestias.
		</div>

<style type="text/css">
			/*320px以下显示红色*/
			/*媒体查询技术*/
			@media only screen and (max-width: 320px) {
				div{
					background-color: red;
				}
			}
			/*321px到640px显示绿色*/
			@media only screen and (min-width: 321px) and (max-width: 640px) {
				div{
					background-color: green;
				}
			}
			/*641px到1002px显示蓝色*/
			@media only screen and (min-width:641px) and (max-width: 1002px) {
				div{
					background-color: blue;
				}
			}
			/*1003px像素以上显示黑色*/
			@media only screen and (min-width:1003px ) {
				div{
					background-color: black;
					color: white;
				}								
			}
		</style>