欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

响应式(1)

程序员文章站 2022-03-18 14:55:17
响应式:适应不同的终端,在不同的终端有较好的显示效果 媒体类型: all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech "听觉"类似的媒体类型 tty 不适用像素的设备 tv 电视 @ ......

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

媒体类型:

  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>