本篇文章为大家展示了如何使用@media设置不同分辨率的CSS样式，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。在css中，可以使用“@media”规则来设置不同分
本篇文章为大家展示了如何使用@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样式，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网node.js频道。
--结束END--
本文标题: 如何使用@media设置不同分辨率的css样式
本文链接: https://www.lsjlt.com/news/80912.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0