对媒体查询的简单认识

相信大家都知道响应式布局，也知道通过媒体查询来设置不同宽度的样式文件来适应不同屏幕的客户端。但是很多时候，对媒体查询却认识不够全面，当用到到时候，还是需要重新查阅文档，翻找文章。很多时候都是因为对其对认识不够深刻。

媒体类型

在很多时候，当看到媒体查询我们都会潜意识认为它只是用来适配手机和PC的，但是这是不全面的。还有一种客户端总是被忽视的，那就是打印部分。通过媒体类型，我们首先应该设置的是计算机彩屏和打印黑白屏的区分（这也是以防万一，万一有需要要打印网页或者其他）。

<!-- 计算机彩屏 -->
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />

<!-- 打印预览或打印 -->
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

或者

//屏幕宽度最小是800px的打印机
@media print and (min-width: 800px) { ... }

• all —用于所有类型
• print -用于打印机和打印预览
• screen 电脑屏幕，手机及智能端
• speech 用于屏幕阅读器等发声设备

• 其他类型(tv,aural,braille等)大多已经废弃

查询规则

相信大家都是用css媒体查询来匹配对应的客户端，当然用插件自动生成也很方便。

关键字 and(且) or(或) not(非)

//屏幕宽度最小是800px的所有类型(当然all 是默认值)的客户端
@media all and (min-width: 800px) { ... }
@media (min-width: 800px) { ... }

//屏幕宽度最小800px且最大1200px的所有类型的客户端
@media (min-width:800px) and (max-width:1200px) { ... }

//屏幕宽度最小800px或方向是纵向的所有类型的客户端
@media (min-width:800px) or (orientation:portrait) { ... }

//屏幕宽度最小不是800px的所有类型的客户端
@media (not min-width:800px){ ... }

屏幕方向 orientation

//横向模式
@media (orientation: landscape) { ... }

//纵向模式
@media (orientation: portrait) { ... }

媒体属性

媒体属性有很多，但最常用的还是屏幕宽度或高度等大小相关的属性，当然也有很多冷门属性，平时用不到的