移动Web开发必备基础之媒体查询
程序员文章站
2022-06-25 08:38:17
媒体类型： all （默认值） screen print 打印设备 speech 屏幕阅读器 由于all是默认值可不写，因此以下两种写法效果相同 @media all and (min-width:900px){ } @media (min-width:900px){ } 媒体查询中的逻辑 与 或 ......
媒体类型：
all （默认值）
screen
print 打印设备
speech 屏幕阅读器
由于all是默认值可不写，因此以下两种写法效果相同
@media all and (min-width:900px){
}
@media (min-width:900px){
}
媒体查询中的逻辑
与 或 非
@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
<!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
<!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 （移动优先）