css3多媒体查询写法

CSS3 媒体查询：

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特

定的样式，从而实现更丰富的界面。

media query(多媒体查询)是对media type的一种增强，是CSS 3的重要内容之一

多媒体查询由【多种媒体】组成，可以包含一个或多个【表达式】，根据条件是否成立文档会在匹配的

设备上显示指定样式效果

【在不改变页面结构的情况下，为不同的设备类型或媒体特性，定制显示效果】

语法

样式表内引入媒体查询

语法：

@media 媒体类型 and (媒体特性表达式){
       //css代码
}

媒体类型(media type)：

all 所有设备；

screen 用于电脑屏幕，平板电脑，智能手机等；

———————以上较为常用———————

print 用于打印机和打印预览；

speech 应用于屏幕阅读器等发声设备

设备特性(media feature)：

width、height视口宽度、高度；（可以配合min,max前缀）

device-width、device-heigh设备宽度、高度（可以配合min,max前缀）

min-最小值 大于等于指定值

max-最大值 小于等于指定值

orientation屏幕朝向

横向 landscape

竖向 portrait

在PC端当窗口的高度值大于等于宽度时该特性值为portrait否则为landscape

关键字（操作符）：

and (与、和)，用于合并媒体类型或多个媒体特性

@media screen and (min-width:600px) and (max-width:1000px){ 
      .box {
          column-count:3; 
} 
}

not: not 非，不是，用于排除掉某些特定的设备

@media not/only 媒体类型 and (媒体特性表达式) {

}

only: 仅仅、只有，用来指定某种特别的媒体类型

例子：
        @media screen and (min-width :1000px) {
            .box {
                column-count: 4;
                color: aqua;
            }
        }

        @media screen and (min-width :600px) and (max-width :1000px){
            .box1 {
                column-count: 3;
                color: blue;
            }
        }

        @media screen and (max-width :600px){
            .box2 {
                column-count: 3;
                color: chartreuse;
            }
        }

媒体查询横竖屏：

        /* 横屏 */
        @media screen and (orientation:landscape){
            .box {
                column-count: 4;
                color: chartreuse;
            }
        }
        /* 竖屏 */
        @media screen and (orientation:portrait){
            .box {
                column-count: 2;
                color: chocolate;
            }
        }

使用link标签的media属性进行媒体查询

作用：针对不同的媒体类型 或特性 引入指定 的 样式表

语法：

    <link rel="stylesheet" media="媒体类型 and （媒体特性表达式）" href="mystylesheet.css">

    <link rel="stylesheet" href="#.css"> 推荐

例：

    <link rel="stylesheet" media="媒体类型 and （媒体特性表达式）" href="mystylesheet.css">
    <link rel="stylesheet" href="#.css" media="screen and (min- width:1000px)"> 
    <link rel="stylesheet" href="#.css" media="screen and (min-width:600px) and (max-width:1000px)"> 
    <link rel="stylesheet" href="#.css" media="screen and (max- width:600px)">