如何使用@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宽度会随浏览器宽度变化哦，试试改变浏览器宽度
        

上述内容就是如何使用@media设置不同分辨率的css样式，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。