定义
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
使用
如果需要 同时对宽度width和高度height判断, 可以使用 and 操作符。
下面代码判断的是 高度小于500px并且宽度大于600px
@media screen and (max-height: 500px) and (min-width:600px){
.toc{
display:none
}
header, main {
margin-left: 2em;
margin-bottom: 3em;
}
}