css响应式

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

媒体类型：

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 screen{

              #box{

                   background-color:pink;   

               }/*仅仅在彩色设备下识别*/

 

  }

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

            #box{

                 background-color:green;   

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

 }

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

           #box{

              background-color:yellow;

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

}

</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(02.css) (min-width:600px);

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

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

</style>

 

文章来自：源码在线https://www.shengli.me/css/28.html