响应式(1)

2018-10-03 17:56:14来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

媒体类型:

  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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:移动端布局注意事项与less

下一篇:CSS 小结笔记之em