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的代码下面,问题解决
完整代码: