使用@media screen解决分web不同分辨率问题

CSS3中的media type属性可以进行类似于我们属性的判读语句switch，其中，应用最广泛的就是根据不同的分辨率使用不同的CSS文件。这极大的提高了各个不同设备的兼容性。话不多说，开始例子：

以下CSS文件中进行了两种不同分辨率的设备的兼容

@media screen and (max-width: 1366px) {
	.banner-info {
		width: 93%;
		margin: 5em auto 0;
	}
	.header-bottom-grids {
		margin-top: 17.2em;
	}
	.header-banner {
		min-height: 790px;
	}
	.services-bottom-grids {
		padding: 5em 0 6em 0;
	}
	.contact-section {
		padding: 4em 0 5em 0;
	}
	.items {
		padding: 5em 0;
	}
	.page-not-found {
		margin: 6em 0 5em 0;
	}
	.news {
		padding: 3em 0;
	}
	.get-in-touch {
		padding: 3em 0;
	}
	.gin h3, .address h3, .dal h3 {
		padding: 0;
	}
	.about-header-banner {
		min-height: 300px;
	}
}

@media screen and (max-width: 1280px) {
	.services-bottom-middle h3 {
		font-size: 2.15em;
	}
	.banner-info {
		margin: 4em auto 0;
	}
	.header-top {
		padding: 1.6em 25px;
	}
	.home {
		width: 7%;
		padding: 2.12em 1.8em;
	}
	.banner-info h1 a {
		font-size: 2.6em;
	}
	.header-bottom-grids {
		margin-top: 16.2em;
	}
	.header-bottom-grid1, .header-bottom-grid2, .header-bottom-grid3, .header-bottom-grid4 {
		padding: 2.5em 0px 3.5em 0;
	}
	.header-banner {
		min-height: 730px;
	}
	.services-bottom-grids {
		padding: 4em 0 5em 0;
	}
	.secvice-top-grid-1, .secvice-top-grid-2, .secvice-top-grid-3, .secvice-top-grid-4 {
		padding: 3em 1.6em 4.5em 1.6em;
	}
	.item-1 h3,.item-2 h3 {
		font-size: 2.3em;
	}
	.item-3 h4 {
		font-size: 2.1em;
	}
	.item-3 {
		min-height: 323px;
	}
	.contact-section h3 {
		font-size: 2.8em;
		margin-bottom: 0.9em;
	}
	.contact-section input.text, .contact-section textarea {
		padding: 20px 15px;
	}
	.contact-section {
		padding: 3em 0 4em 0;
	}
	.footer {
		padding: 1.3em 0;
	}
	.page-not-found h3 {
		font-size: 15em;
	}
	.page-not-found h4 {
		font-size: 6em;
	}
	.about-header-banner {
		min-height: 265px;
	}
	.gin h3, .address h3, .dal h3 {
		font-size: 1.8em;
	}
	.news-text h3 {
		padding-top: 0;
	}
	.testimonials {
		min-height: 340px;
		padding: 4em 0 0 0;
	}	
}

通过以上代码，当分辨率为1366px时，自动切换到对应的格式，当分辨率为1280px时同理。

通过这样的方式，对应不同设备的兼容性问题可以有很便捷高效的解决方案