媒体查询-页面布局

媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

<style>
        /* 这句话意思是： 在我的屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
        /* max-width:800px  小于等于800 */
        /* 媒体查询可以根据不同的尺寸在改变不同的样式 */
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>

<style>
        /* 媒体查询一般按照从小到大或从大到小来 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 970px) {
            body {
                background-color: pink;
            }
        }
    </style>