Css - 媒体查询

一. 媒体查询作用？

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

二. 在哪里使用媒体查询？

• link标签内

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

• Css样式表内

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

三. 基本语法

@media 媒体类型 and （媒体特性）{
     样式
}

四. 逻辑操作符

操作符	描述
and	合并多条
not	取非
only	防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式
，（相当于or）	或运算

五. 媒体类型与媒体特性

常用媒体类型	描述
all	所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

常用媒体特性	描述
max-width / max-height	最大宽高，当前设备小于该值时生效
min-width / min-height	最小宽高，当前设备大于该值时生效
min-resolution / max-resolution / resolution	分辨率
aspect-ratio / max-aspect-ratio / min-aspect-ratio	可见区域宽高比
device-aspect-ratio / min-device-aspect-ratio / max-device-aspect-ratio	设备宽高比
device-height / min-device-height / max-device-height	设备高度
device-width / min-device-width / max-device-width	设备宽度
orientation	方向，判断设备处于横屏还是竖屏
monochrome / min-monochrome / max-monochrome	主要用于判断是否为黑白屏
grid	判断输出设备是网格设备还是位图设备
color / min-color / max-color	判断设备输出颜色数
color-index / min-color-index / max-color-index	指定了输出设备中颜色查询表中的条目数量

六. 例子

• 根据宽度调整样式

        <style>
            @media screen and (min-width:1000px) and (max-width:2000px) {
                body{
                    background-color: green;
                }
            }
            @media screen and (min-width:100px) and (max-width:1000px) {
                body{
                    background-color: red;
                }
            }
        </style>

• 根据横屏和竖屏调整样式

        <style>
            /* 竖屏 */
            @media screen and (orientation:portrait){
                body{
                    background-color: green;
                }
            }
            /* 横屏 */
            @media screen and (orientation:landscape){
                body{
                    background-color: red;
                }
            }
        </style>