CSS3多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
多媒体查询窗口大小
多媒体查询显示器窗口大小是一个很常用的需求，这可以用于响应式网页开发，为不同设备提供不同的样式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 多媒体查询</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{width: 100%;height: 100%;}
@media screen and (max-width:500px) {
div{background-color: pink;}
}
@media screen and (min-width:500px){
div{background-color: lime;}
}
@media screen and (min-width:768px) {
div{background-color: lightsalmon;}
}
@media screen and (min-width:960px) {
div{background-color: lightskyblue;}
}
@media screen and (min-width:1200px) {
div{background-color: limegreen;}
}
</style>
</head>
<body>
<div style="width: 200px;height: 200px;">调整窗口大小，观察颜色变化</div>
</body>
</html>
网格视图
使用网格视图有助于设计网页，响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩，所有列包裹在一个行row里。所有的列需要设置浮动或者弹性盒子的子元素来排列到一行，设置浮动的话父容器需要清除浮动才能获得高度。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网格视图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box;padding: 0;margin: 0;}
html,body{width: 100%;}
.row{
width: 100%;
/*overflow: hidden;*/
/*display:flex;
flex-wrap: wrap;*/
}
.row::after{
content: "";
clear: both;
display: block;
}
.col-3{
border: 1px solid black;
margin-top: 10px;
width: 25%;
height: 50px;
background-color: aqua;
float: left;
}
.col-2{
border: 1px solid black;
margin-top: 10px;
width: 16.66%;
height: 50px;
background-color: green;
float: left;
}
.col-1{
border: 1px solid black;
margin-top: 10px;
width: 8.33%;
height: 50px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<h1>网格视图</h1>
<div class="row">
<div class="col-3">第1列</div>
<div class="col-3">第2列</div>
<div class="col-3">第3列</div>
<div class="col-3">第4列</div>
</div>
<div class="row">
<div class="col-2">第1列</div>
<div class="col-2">第2列</div>
<div class="col-2">第3列</div>
<div class="col-2">第4列</div>
<div class="col-2">第5列</div>
<div class="col-2">第6列</div>
</div>
<div class="row">
<div class="col-1">第1列</div>
<div class="col-1">第2列</div>
<div class="col-1">第3列</div>
<div class="col-1">第4列</div>
<div class="col-1">第5列</div>
<div class="col-1">第6列</div>
<div class="col-1">第7列</div>
<div class="col-1">第8列</div>
<div class="col-1">第9列</div>
<div class="col-1">第10列</div>
<div class="col-1">第11列</div>
<div class="col-1">第12列</div>
</div>
</body>
</html>
响应式实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>响应式实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box;}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
[class*="col-"]{
width: 100%;
margin: 5px auto;
text-align: center;
background-color: #0f0;
border:1px solid black; /*移动端优先,通用列样式*/
}
@media screen and (min-width: 576px) {
.col-xs-1{width: 8.33%;background-color: aqua;}
.col-xs-2{width: 16.66%;background-color: aqua;}
.col-xs-3{width: 25%;background-color: aqua;}
.col-xs-4{width: 33.33%;background-color: aqua;}
.col-xs-5{width: 41.66%;background-color: aqua;}
.col-xs-6{width: 50%;background-color: aqua;}
.col-xs-7{width: 58.33%;background-color: aqua;}
.col-xs-8{width: 66.66%;background-color: aqua;}
.col-xs-9{width: 75%;background-color: aqua;}
.col-xs-10{width: 83.33%;background-color: aqua;}
.col-xs-11{width: 91.66%;background-color: aqua;}
.col-xs-12{width: 100%;background-color: aqua;}
}
@media screen and (min-width: 768px) {
.col-sm-1{width: 8.33%;background-color: #f0f;}
.col-sm-2{width: 16.66%;background-color: #f0f;}
.col-sm-3{width: 25%;background-color: #f0f;}
.col-sm-4{width: 33.33%;background-color: #f0f;}
.col-sm-5{width: 41.66%;background-color: #f0f;}
.col-sm-6{width: 50%;background-color: #f0f;}
.col-sm-7{width: 58.33%;background-color: #f0f;}
.col-sm-8{width: 66.66%;background-color: #f0f;}
.col-sm-9{width: 75%;background-color: #f0f;}
.col-sm-10{width: 83.33%;background-color: #f0f;}
.col-sm-11{width: 91.66%;background-color: #f0f;}
.col-sm-12{width: 100%;background-color: #f0f;}
}
@media screen and (min-width: 960px) {
.col-md-1{width: 8.33%;background-color: #ff0;}
.col-md-2{width: 16.66%;background-color: #ff0;}
.col-md-3{width: 25%;background-color: #ff0;}
.col-md-4{width: 33.33%;background-color: #ff0;}
.col-md-5{width: 41.66%;background-color: #ff0;}
.col-md-6{width: 50%;background-color: #ff0;}
.col-md-7{width: 58.33%;background-color: #ff0;}
.col-md-8{width: 66.66%;background-color: #ff0;}
.col-md-9{width: 75%;background-color: #ff0;}
.col-md-10{width: 83.33%;background-color: #ff0;}
.col-md-11{width: 91.66%;background-color: #ff0;}
.col-md-12{width: 100%;background-color: #ff0;}
}
@media screen and (min-width: 1200px) {
.col-lg-1{width: 8.33%;background-color: #0ff;}
.col-lg-2{width: 16.66%;background-color: #0ff;}
.col-lg-3{width: 25%;background-color: #0ff;}
.col-lg-4{width: 33.33%;background-color: #0ff;}
.col-lg-5{width: 41.66%;background-color: #0ff;}
.col-lg-6{width: 50%;background-color: #0ff;}
.col-lg-7{width: 58.33%;background-color: #0ff;}
.col-lg-8{width: 66.66%;background-color: #0ff;}
.col-lg-9{width: 75%;background-color: #0ff;}
.col-lg-10{width: 83.33%;background-color: #0ff;}
.col-lg-11{width: 91.66%;background-color: #0ff;}
.col-lg-12{width: 100%;background-color: #0ff;}
}
/*横竖屏*/
body{background-color: lightgreen;}
@media screen and (orientation:landscape) {
body{background-color: lightblue;}
}
</style>
</head>
<body>
<h1>调整窗口观察列的排版</h1>
<div class="row">
<div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">第1列</div>
<div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">第2列</div>
<div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">第3列</div>
<div class="col-xs-8 col-sm-6 col-md-4 col-lg-3">第4列</div>
</div>
</body>
</html>
横竖屏两种状态：orientation：portrait(宽度小于高度)| landscape(宽度大于高度)
网友评论