CSS中响应式布局媒体查询(@media)

一、响应式布局

响应式布局
    网页可以根据不同的设备或黄口大小呈现出不同的效果
    使用响应式布局，可以使一个网页适用于所有设备
    响应布局的关键是媒体查询
    通过媒体查询可以为不同的设备，或设备不同状态来分别设置样式

二、媒体查询（@media）

	使用媒体查询
        语法：@media 查询规则{}
            媒体类型:
                all 所有设备
                print   打印设备
                screen  带屏幕的设备
                speech  屏幕阅读器
                可以使用,连接多个媒体类型，这样他们之间是一个或的关系


    可以在媒体类型前添加一个only：表示只有。
        only的使用主要是为了兼容一些老版本的浏览器

	@media print,screen{
        body{
            background-color: #bbffaa;
        }
    }

媒体特性

媒体特性
           width 视口宽度
           height 视口的高度

            min-width 视口最小宽度 (视口大于指定宽度时生效)
            max-width 视口最大宽度  (视口小于指定宽度时生效)

样式切换的分界点称其为断点，也就是网页的样式会在这时变化
        一般比较常用的断点
            小于768 超小屏幕 max-width=768px
            大于768 小屏幕 min-width=768px
            大于992 中型屏幕 min-width=992px
            大于1200 大屏幕 min-width=1200px

@media (min-width: 500px) and (max-width: 300px){
        /* 逗号表示或关系，and表示与 */
        body{
            background-color: #bbffaa;
        }
    }