本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
媒体类型： all （默认值） screen print 打印设备 speech 屏幕阅读器
由于all是默认值可不写，因此以下两种写法效果相同
[HTML] 纯文本查看 复制代码 @media all and (min-width:900px){
}
@media (min-width:900px){
}
媒体查询中的逻辑 与 或 非
[HTML] 纯文本查看 复制代码 @media (min-width:900px) and (max-width:1024px){
}
媒体特征表达式 width / max-width / min-witdh -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-device-pixel-ratio orientation: landscape / portrait 横屏 / 竖屏
媒体查询-策略 移动端断点（参考bootstrap） xs <576px 1 sm 576~768px 2 md 768~992px 4 lg 992~1200px 6 xl >1200px 12
后面的条件满足时，会覆盖前面的条件 PC first
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="font/iconfont.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
img{width:100%;}
.row{width:100%;display: flex;flex-wrap:wrap;}
/*pc first*/
.col{width:8.33%;}
@media (max-width:1200px){
.col{width:16.67%;}
}
@media (max-width:992px){
.col{width:25%;}
}
@media (max-width:768px){
.col{width:50%;}
}
@media (max-width:576px){
.col{width:100%;}
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
</div>
</body>
</html>
mobile first
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="font/iconfont.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
img{width:100%;}
.row{width:100%;display: flex;flex-wrap:wrap;}
/*mobile first*/
.col{width:100%;}
@media (min-width:576px){
.col{width:50%;}
}
@media (min-width:768px){
.col{width:25%;}
}
@media (min-width:992px){
.col{width:16.67%;}
}
@media (min-width:1200px){
.col{width:8.33%;}
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
<div class="col">
<img src="img/cyy.jpg">
</div>
</div>
</body>
</html>
效果同上 一般建议mobile first （移动优先）
| 
发表于 2020-3-18 12:00:00
