响应式（1）

响应式：适应不同的终端，在不同的终端有较好的显示效果

媒体类型：

　　all　　所有媒体

　　braille　　盲文触觉设备

　　embossed　　盲文打印机

　　print　　手持设备

　　projection　　打印预览

　　screen　　彩屏设备

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

　　tty　　不适用像素的设备

　　tv　　电视

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

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

　　@media not  是用来排除某种特殊类型的 如@media not tv

　　@media (orientation:portrait)  屏幕垂直

　　@media (orientation:landscape) 屏幕水平

　　

媒体特性：

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

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

 　　

<style>

　　#box{

　　　　width:100px;

　　　　height:100px;

　　　　background-color:red;

　　}

 

　　@media  braille  {

　　　　#box{

　　　　　　background-color:green;

　　　　}/*当在盲文触觉设备上是绿色*/

　　}

　　

　　@media tv  {

　　　　#box{

　　　　　　background-color:pink;

　　　　}/*当在tv设备上是粉色*/

　　}

 

　　@media all{

　　　　#box{

　　　　　　background-color:red;

　　　　}/*在所有媒体上都是红色*/

　　}

 

　　@media only screen{

　　　　#box{

　　　　　　background-color:pink;

　　　　}

　　}/*仅仅在彩屏设备下识别,only可以省略*/

 

　　@media all and (min-width:500px){

　　　　#box{

　　　　　　background-color:green;

　　　　} /*当屏幕宽度>=500的时候识别*/

　　}

　　

　　@media all and (max-width:500px){

　　　　#box{

　　　　　　background-color:yellow;

　　　　} /*当屏幕宽度<=500的时候识别*/

　　}

 

　　@media (orientation:landscape){

　　　　div{

　　　　　　background-color:#000;

　　　　}

　　} /*当屏幕为水平，基本不用*/

 

　　@media (orientation:portrait){

　　　　div{

　　　　　　background-color:yellow;

　　　　}

　　} /*当屏幕为垂直，基本不用*/

　

</style>

<div id="box">

</div>

 

响应式的引入方式一：

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

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

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

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

 

响应式的引入方式二：

<style>

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

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

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

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

 

 

</style>