这篇文章主要给大家介绍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>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc {
height: 300px;
border: 1px solid #000;
margin: 0 auto
} //可以去掉边框
@media screen and (min-width: 1201px) {
.abc {
width: 1200px
}
}
/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {
width: 900px
}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {
width: 200px;
}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {
width: 100px;
}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html> 关于css设置分辨率的方法就介绍到这了，大家按照上述步骤操作即可，希望本文能对大家有帮助，想要了解更多css的内容，请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 :
B1.B2-20140078
粤ICP备09006778号-36
粤公网安备 44090202000006号
粤工商备P091701000595