极简响应式媒体查询
2016-12-06 本文已影响523人
犯迷糊的小羊
认识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){}
