CSS3媒体查询以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式，最常用的查询是处理视口高度和宽度的查询，其次便是宽高比例查询。CSS3媒体查询跟bootstarp的响应式特别相似。

 

媒体类型：
　　all：适用于所有设备。
　　print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
　　screen：主要适用于屏幕。
　　speech：主要适用于语音合成器。

 

媒体功能：
　　width：可视化宽度
　　height ：可视化高度
　　aspect-ratio：视口的宽高比宽高比
　　orientation：视口的方向
　　resolution：输出设备的像素密度
　　prefers-reduced-transparency：透明度设置
　　grid：设备是否使用网格或位图屏幕
　　update：输出设备修改内容外观的频率
　　overflow-block：输出设备如何处理沿块轴溢出视口的内容
　　overflow-inline：可以滚动沿着内联轴溢出视口的内容

 

eg:

@media screen and (min-width: 768px)  {
        //常规用法
}

@media screen and (max-aspect-ratio: 1200/1000) {
        //宽高比常规用法
}

@media screen and (min-width: 768px) and (max-width:1024px) {
        //用and结合多条件
}

@media screen and (max-aspect-ratio: 1200/1000) and (min-aspect-ratio: 700/1000){
        //宽高比结合多条件
}