1、什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
2、媒体查询与弹性盒布局的适用情况
媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒
3、语法
//注意要在header里面写上
<meta name="viewport" content="width=device-width, initial-scale=1.0">
法一：
@media mediatype and|not|only (media feature) {CSS-Code;}
法二：
<link rel="stylesheet" media="mediatype and | not |
only (media feature)" href="路径/XX.css"
//例子
<link rel="stylesheet" media="screen and (min-width=1100px)" href="路径/XX.css"
4、mediatype
image.png
5、三栏布局--》两栏布局--》一栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%; flex-wrap:wrap;} /*flex-wrap:wrap;因为后面有设width：100%*/
body{display:flex;}
.box1{background: #f00;}
.box2{background: #0f0;}
.box3{background: #00f;}
@media screen and (min-width:1100px){ /*三栏布局*/
.box1{width: 100px;} /*没有写高度，由内容撑起来*/
.box2{flex:1; }
.box3{width: 100px;}
}
@media screen and (min-width:800px) and (max-width:1100px){ /*二栏布局*/
.box1{width: 100px;}
.box2{flex:1; }
.box3{width: 100%;}
}
@media screen and (max-width:800px) { /*一栏布局*/
.box1,.box2,.box3{width: 100%;}
}
</style>
</head>
<body>
<div class="box1">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
<div class="box2">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
<div class="box3">首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。首先，不要用链接的方式发简历，直接发附件，再有“rar”是windows的压缩格式，现在大部分设计师用的都是苹果电脑，面试官不可能为了你专门去找个插件来解压你的文件，所以最好压缩成“.zip"格式的。</div>
</body>
</html>
网友评论