响应式笔记

1.什么是响应式
    响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

2.媒体查询方式
    1）css2中的媒体查询
        内补：
            <style media="screen,tv">
            .box{
                height: 100px;
                width: 100px; 
                background-color: lightblue;
            }    
            </style>
        外部：
            <link ref="stylesheet" href="demo.css" media=""></link>
    2)css3中的媒体查询
        内部：
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
    
            @media screen{
                .box{
                    background-color: pink;
                }
            }
           外部：
            <link ref="stylesheet" href="demo.css" media=""></link>
        less:
            body{
                background-color: pink;
                //当你想要用媒体查询控制body的时候，那么可以直接在body中书写媒体查询
                @media (min-width:800px) {
                    //less中，当媒体查询书写在某个选择器中的时候，我们不用再书写选择器，而是可以直接在媒体查询中书写样式
                    background-color: red;
                }
            }
            或：
            body{
                background-color: pink;
            }
            @media (min-width:800px) {
                body{
                    background-color: red;
                }
            }

3.媒介类型
    all            适合所有设备
    screen         计算机屏幕（默认值） 
    print          打印预览模式 / 打印页   
    tty            电传打字机以及使用等宽字符网格的类似媒介
    tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
    projection     放映机
    handheld       手持设备（小屏幕、有限的带宽）
    braille        盲人用点字法反馈设备
    aural          语音合成器
    
4.媒体特征
    媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用，更多常用的媒体特征详细信息可参考下表：
    | 设备特征     | 取值                     | 说明                                                         |
    | ------------ | ------------------------ | ------------------------------------------------------------ |
    | width        | 长度数值，如600px        | 输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度 |
    | height       | 长度数值，如600px        | 输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度 |
    | aspect-raido | 整数或小数               | viewport 宽高比，值为宽度/高度                               |
    | orientation  | portrait 或 landscape    | 设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式 |
    | resolution   | 数值                     | 设备分辨率，如 300ppi                                        |
    | color        | 正整数                   | 检查设备支持多少种颜色等                                     |
    | scan         | progressive 或 interlace | 输出设备的扫描方式，大部分现代屏幕使用 progressive 渐进式方式，部分等离子电视使用 interlace 隔行扫描 |
    | grid         | 0 或 1                   | 判断输出设备是网格设备还是位图设备             
    
5.逻辑条件
     and:用于 媒体特征
          @media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){}
     not、only ：媒介类型
         @media not all and (orientation : portrait){}
         @media only screen and (orientation : portrait) and (-webkit-device-pixel-ratio : 2){}
         
6.媒体查询常用断点
    /* 很小的设备（手机等，小于 600px） */
    @media only screen and (max-width: 600px) {...}
    /* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
    @media only screen and (min-width: 600px) {...}
    /* 中型大小设备（横屏的平板, 大于 768px） */
    @media only screen and (min-width: 768px) {...}
    /* 大型设备（电脑, 大于 992px） */
    @media only screen and (min-width: 992px) {...}
    /* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
    @media only screen and (min-width: 1200px) {...}