如何使用@media设置不同分辨率的css样式

本篇文章为大家展示了如何使用@media设置不同分辨率的css样式，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

宁陕网站建设公司创新互联建站,宁陕网站设计制作，有大型网站制作公司丰富经验。已为宁陕成百上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的宁陕做网站的公司定做！

在css中，可以使用“@media”规则来设置不同分辨率的样式。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 查询的语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

例：

/* 设置了浏览器宽度小于1600px时的样式 */ 
@media screen and (max-width: 1600px) {
    .select2-container{
        width:328px !important;
    }
    #address{
        width:calc(37% - 3px) !important;
    }
}
/* 设置了浏览器宽度小于1367px时的样式 */ 
@media screen and (max-width: 1367px) {
    .select2-container{
        width:275px !important;
    }
    #address{
        width:calc(36% + 3px) !important;
    }
}

可以看出：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

实例：

DOCTYPE html>

	
		
		
		
		
	

	
		DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度