前端提高篇（四十五）CSS进阶10Media媒体查询
媒体查询主要用于布局
常见的布局：
1.静态布局：框宽度大小固定，不会随着浏览器显示区域大小的改变而改变，有足够的空间，元素不会串行等
2.流式布局：当浏览器显示区域大小改变时，整体布局不变（几行几列不变），但dom元素的大小在变，不用固定宽度，用百分比。父级大，里面的元素占的位置就大
3.自适应布局
4.响应式布局
当媒体类型为true，媒体特性也为true，设置的样式就可以生效
媒体查询引入方式：
1.link元素中的css媒体查询：
<link rel="stylesheet" href="13.css" media="screen and (max-width : 600px)">
在13.css文件里写着：如果media语句返回true，要执行的代码
效果是：当彩色屏幕宽度小于600px时，展示13.css文件里的代码
当media条件不满足时，css文件也是被加载的，只是没有执行，可以在F12里的Network栏查看
从图片可以看出，虽然没有样式，但css文件是有被加载的
不建议用外部引入的方法，因为一句link只能有一句media操作，如果有多个操作，需要写很多次link
2.样式表中的css媒体查询：
html里的引入：
<link rel="stylesheet" href="13.css">
13.css文件里：
@media screen and (max-width : 600px) {
.wrapper {
width: 100px;
height: 100px;
text-align: center;
background-color: blueviolet;
}
}
也能达到同样效果
有些样式，无论是否符合media条件，都需要执行；这些代码就可以放在media以外的公共区域，把有变动的写在media里即可
媒体类型：常用的是彩色屏幕screen，也可以设置成all，匹配所有类型
媒体特性：最常用的有：min-width，max-width
orientation : landscape代表横屏，portrait代表竖屏
.wrapper {
width: 100px;
height: 100px;
text-align: center;
background-color: purple;
color: #fff;
}
@media screen and (orientation : portrait) {
.wrapper {
background-color: blue;
color: orange;
}
}
效果：横屏时时默认的背景和字色，竖屏时用media里的背景颜色和字色
逻辑操作符
逗号代表or：
当彩色屏幕是横屏或者屏幕宽度小于600px时，执行media里的样式：
.wrapper {
width: 100px;
height: 100px;
text-align: center;
background-color: purple;
color: #fff;
}
@media screen and (orientation : landscape), screen and (max-width: 600px) {
.wrapper {
background-color: blue;
color: orange;
}
}
screen and (orientation : landscape) 或screen and (max-width: 600px)返回true，就执行
not ：
@media not screen and (min-width:400px) and (max-width: 600px){
}
这句代表除了（400，600）范围内的，其他的宽度都会执行media下的样式
相当于：
@media not (screen and (min-width:400px) and (max-width: 600px)){
}
注意括号的位置，不是not screen，而是not一长串
only操作符是为了防止老旧的浏览器，不支持老旧浏览器
案例：
三列布局，当屏幕太小时，将左边的一列放到最上面当导航栏
问题1：
设置ul为flex，主轴方向垂直，高度150px，底下5个li，但是li超出了ul
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 150px;
height: 150px;
display: flex;
flex-direction: column;
}
li {
border-bottom:1px solid orange;
width: 100%;
background: #ccc;
height: 30px;
text-align: center;
line-height: 30px;
}
讲道理，这个border应该在30px里才对，怎么会跑出来，设置flex-grow也不行，总不能改变高度吧
后来发现，是因为我设置了line-height，所以li的border-bottom才在30px以外再加1px的
注释掉line-height后，li高度为30px
但文字居中的功能没有了，所以在li上再设置flex
此时的text-align：center只能在主轴在竖直方向才能生效
主轴设置为竖直，再加justify-content和text-align即可
问题2：我在html文件用内部引入的方法写了样式，media代码写在13.css里，用外部引入的方法加载，有时，left的效果可以被display：none掉，但是同时，nav的display: flex没有生效，于是我把media代码加在nav设置display的代码下面，问题解决
完整代码：
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.container {
display: flex;
height: auto;
}
.wrapper {
height: auto;
width: 100%;
/* background: #ccc; */
/* display: flex; */
}
.nav {
width: 100%;
background: #ccc;
height: 50px;
justify-content: flex-end;
display: none;
}
@media screen and (max-width:800px) {
.nav {
display: flex;
}
.left {
display: none;
}
}
.nav ul {
width: 300px;
display: flex;
/* justify-content: flex-end; */
height: 50px;
/* position: relative;
margin:5px 5px; */
}
.nav li {
width: 60px;
border-left: 1px solid black;
padding: 5px 5px;
margin: 5px 0px;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
.left {
height: 150px;
/* display: none; */
}
.left ul {
width: 150px;
height: 150px;
display: flex;
flex-direction: column;
}
.left li {
border-bottom: 1px solid orange;
width: 100%;
background: #ccc;
height: 30px;
/* line-height: 30px; */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.center {
width: 200px;
flex-grow: 1;
background: pink;
}
.right {
width: 150px;
background: purple;
height: 150px;
}
style>
效果：