css-响应式布局

响应式媒体类型

                   all所有媒体

                   braille盲文触觉设备

                   embossed盲文打印机

                   print手持设备

                   projection打印预览

                   screen彩屏设备

                   speech'听觉'类似的媒体类型

                   tty不适用像素的设备

                   tv  电视

用法

@media embossed{

                   /*盲文打印机是绿色*/

                   #box{

                            background-color:green;

                   }

}

@media only 设备类型

         只有在特定的某种设备上 识别

         用法

         @mediaonly screen {

                   #box{

                            background-color:pink;

                   }

         }

and

         连接媒体类型和 媒体特性的

         @mediaall and (min-width:500px) {

                   #box{

                            background-color:green;

                   }

         }

用法

响应式媒体特性

min-width:

         当屏幕大小 大于等于 某个值的时候识别                          

max-width:

         当屏幕大小 小于等于 某个值的时候识别

@media not

                            排除掉某种特殊的媒体类型

@media (orientation:portrait)

         屏幕垂直

@media (orientation:landscape)

         屏幕水平

响应式引入方式

<link rel="stylesheet" href="01.css"media="all and (min-width:400px)"/>

                   <linkrel="stylesheet" href="02.css" media="all and(min-width:600px)"/>

                   <linkrel="stylesheet" href="03.css" media="all and(min-width:800px)"/>

                   <linkrel="stylesheet" href="04.css" media="all and(min-width:1000px)"/>

@import url(01.css) (min-width:400px);

                            @importurl(02.css) (min-width:600px);

                            @importurl(03.css) (min-width:800px);

                            @importurl(04.css) (min-width:1000px);