使用@media screen and实现响应式web网页

做web前端的攻城师都知道、经常要为不同分辨率设备或不同窗口大小下布局错位而头疼、现在很好咯、可以利用@media screen实现网页布局的自适应

但是怎样兼容所有主流设备就成了问题、到底分辨率是多少的时候设置呢？下面我分享一个自己在项目中使用的一套响应式的技巧、希望对大家有用

个人认为有几个临界点的分辨率、那么我们就可以轻松的来写自己的自适应代码了

480px以下

@media only screen and (max-width: 479px) {
    .head_title{
    	background: blue;
    }
    body {
		min-width: 320px;
		max-width: 479px;
		margin: 0 auto;
	}

}

480px到767px

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .head_title{
    	background: red;
    }
    body {
		min-width: 480x;
		max-width: 767px;
		margin: 0 auto;
	}

}

768px到959px

@media only screen and (min-width: 768px) and (max-width: 959px) {
     .head_title{
    	background: black;
    }
    body {
		min-width: 768x;
		max-width: 959px;
		margin: 0 auto;
	}

}

960px以上

@media only screen and (min-width: 960px) {
     .head_title{
    	background: green;
    }
    body {
		min-width: 960x;
		max-width: 1020px;
		margin: 0 auto;
	}

}

适配1200px上的屏幕、这个根据项目需要、可自行设定