前端提高篇（四十五）CSS进阶10Media媒体查询

@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的代码下面，问题解决

完整代码：