在css中，可以使用“@media”规则根据不同的屏幕尺寸，来设置不同分辨率的样式，语法“@media mediatype and|not|only (media feature){css样式}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在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宽度会随浏览器宽度变化哦，试试改变浏览器宽度
（学习视频分享：css视频教程）
以上是怎么设置不同分辨率的css样式的详细内容。更多信息请关注PHP中文网其他相关文章！
