CSS @media媒体查询

语法

//语法：
@media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width = device-width：宽度等于当前设备的宽度

• initial-scale：初始的缩放比例（默认设置为1.0）

• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

标签中引入（CSS2 media）

<link rel="stylesheet" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

CSS3 @media

// 等于960px尺寸的代码，以下代码需要写在style标签或者css文件中：
@media screen and (max-device-width:960px){
    body{background:red;}
}

// 当浏览器尺寸大于960px时候的代码了：
@media screen and (min-width:960px){ 
    body{background:orange;}
}

// 混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

• width:浏览器可视宽度。
• height:浏览器可视高度。
• device-width:设备屏幕的宽度。
• device-height:设备屏幕的高度。
• orientation:检测设备目前处于横向还是纵向状态。
• aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
• device-aspect-ratio:检测设备的宽度和高度的比例。
• color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
• color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
• monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
• resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
• grid:检测输出的设备是网格的还是位图设备。

媒体类型

1. all 所有媒体
2. braille 盲文触觉设备
3. embossed 盲文打印机
4. print 手持设备
5. projection 打印预览
6. screen 彩屏设备
7. speech ‘听觉’类似的媒体类型
8. tty 不适用像素的设备
9. tv 电视

关键字

1. and
2. not not关键字是用来排除某种制定的媒体类型
3. only only用来定某种特定的媒体类型

-很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

常用的几种屏幕宽度设定：

@media screen and (min-width: 1200px) {
  css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
  css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
  css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
  css-code;
}
@media screen and (max-width: 479px) {
  css-code;
}