首页 > 代码库 > 响应式布局设计——回顾

响应式布局设计——回顾

响应式设计是在不同设备下分辨率不同显示的样式就不同。
  media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
    语法: @media mediatype and | not | only (media feature) {}
    示例:
      <link rel="stylesheet" media="screen and (max-width: 600px)" href="http://www.mamicode.com/small.css"/>
    结果: 分辨率在大到600的时候 显示这个样式表里面的样式。

  媒体类型:

      all 用于所有设备

      print 用于打印机和打印设备      

      screen 用于电脑屏幕,平板电脑,智能手机。

          speech 用于阅读器等发声设备

  关键字:

       and 运算符用于符号两边规则均满足条件则匹配。

      @media screen and (max-width : 600px) {
          /*匹配宽度小于600px的电脑屏幕*/
      }

    not关键字是用来排除某种制度的媒体类型。
      @media not print {
        /*匹配除了打印机以外的所有设备*/
      }
    only 用来定某种特定的媒体类型。
      @media only screen and (min-width:300) and (max-width:500){
        /*这段是只(only)针对彩色屏幕设备*/
    }

  媒体特性: (常用的)    

    max-width(max-height): 最大宽度和最大高度

      @media (max-width: 600px) {
        匹配界面宽度小于600px的设备
      }
    min-width(min-height) : 最小宽度和高度
      @media (min-width : 400px) {
        匹配界面宽度大于400px的设备
      }
    max-device-width(max-device-height) 设备的最大宽度和高度
      @media (max-device-width: 800px) {
        匹配设备(不是界面)宽度小于800px的设备
      }
    min-device-width(min-device-height):  设备的最大宽度和高度
      @media (min-device-width: 600px) {
        匹配设备(不是界面)宽度大于600px的设备
      }
    orientation: portrait 竖屏
      <link rel="stylesheet" media="all and
        (orientation:portrait)"
      href="http://www.mamicode.com/indexa.css"/>
     结果: 在竖屏下显示这样式
    orientation:landscape 横屏
      <link rel="stylesheet" media="all and
        (orientation:landscape)"
          href="http://www.mamicode.com/indexa.css"/>
     结果: 在横屏下显示这样式

 

响应式布局设计——回顾