本篇文章为大家展示了如何使用@media设置不同分辨率的css样式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
在css中,可以使用“@media”规则来设置不同分辨率的样式。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 查询的语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
例:
@media screen and (max-width: 1600px) {
.select2-container{
width:328px !important;
}
#address{
width:calc(37% - 3px) !important;
}
}
@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
}
}
@media screen and (max-width: 1200px) {
.abc {
width: 900px
}
}
@media screen and (max-width: 900px) {
.abc {
width: 200px;
}
}
@media screen and (max-width: 500px) {
.abc {
width: 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>
上述内容就是如何使用@media设置不同分辨率的css样式,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。