媒体查询

基础：

组成部分：

1. 一个媒体类型

2. 一个媒体表达，是被包含的css生效所需的规则或者测试

3. 一组css规则，会在测试通过且媒体查询类型正确的时候用

媒体类型：

1. all 所有

2. print 打印的时候，打印机和打印预览

3. screen 用于电脑屏幕，手机等等

4. speech用于屏幕阅读等发声设备

媒体特征规则（css规则）

1. 宽和高

@media screen and (width:600px){
    body{
    color:red
    }
}

也可以使用数值范围，max-,min-用于表示最大最小

@media screen and (max-width:400px){
    body{
    color:red
    }
}
//当页面宽度小于等于400时，颜色就是红色

2. 朝向(orientation)

• 检测竖着放：

  orientation:portrait

• 检测横着放：

  orientation:landscape

@media (orientation:landscape){
    body{
    color:red
    }
}

3. 指点设备

@media (hover:hover){
    body{
    color:red
    }
}

复杂操作

与：and

@media screen and (min-width:400px) and (orientation:landscape){
    body{
    color:blue
    }
}

或：用，

@media screen and ( min-width:400px),screen and (orientation:landscape){
    body{
    color:blue
    }
}

非：not

@media not all and (origentation:lanscape){
    body{
    color:blue
    }
}

标签：body,orientation,媒体,color,media,screen,查询,landscape,meida
来源： https://www.cnblogs.com/summer-like-writing/p/15782322.html