极简响应式媒体查询

认识Media Query

媒体查询作为网页响应式布局的一种方式，可以针对不同媒体类型定制不同的样式规则。

所谓的媒体类型，包括PC、平板、手机、打印机、电视、屏幕阅读器等。

使用媒体查询的方法有两种：

• 在link标签中定义

<link rel="stylesheet" herf = "responsive.css"  media="mediatype and | not | only (media feature)"></link>

• 直接在css文件中定义

<style>
@media screen (min-width : 800px){
      div{
         background:red;
      }
}
</style>

Media Query的常见语法

媒体查询的语法包括逻辑操作符、媒体类型和媒体属性

1.逻辑操作符

逻辑操作符主要有 and | not | only和逗号分隔列表

• and操作符能够把多个媒体属性组合到一条媒体查询，只有每个属性为真，查询结果才为真；

@media screen and (min-width:400px) and (max-width: 600px) {
      color:red;
}

• 逗号分隔列表，效果等同于or逻辑操作符，这要有其中一个查询条件为真，则查询返回真；

@media (min-width:600px), handled and (orientation:lanscape){
    color:red
}

• not操作符应用于整个媒体查询并对结果取反；

@media not print and (min-width:900px) {
    color:red;
}
//等价于

@media not (print and (min-width:900px)){
    color:red;
}

• only操作符是纺织老旧浏览器不支持媒体查询而应用给定样式，即对于支持媒体查询的浏览器而言会忽略only而直接响应后面满足条件的样式，而对于不支持媒体查询的浏览器而言会忽略后面样式；

@media only screen {
    color:red;
}

2.媒体类型

媒体类型属于媒体属性的子集，这里为了理解方便，所以单独划分开来。

常见的媒体类型（属性）包括：

• all：所有设备；
• screen： 计算机屏幕、平板和手机登；
• print：打印设备；
• speech：屏幕阅读器；

3.媒体属性

下面列举出常用的媒体属性：

• 设备宽高（设备屏幕区域）：device-width | device-height | max-device-width | min-device-height；
• 宽高（渲染区域）：width | height |max-width | min-height；
• 设备方向：(orientation){portrait | landscape}
• 分辨率：(resolution:300dpi){}

一个Media Query的demo

【Media-Query】