媒体查询

1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

/* 当屏幕上页面课件区域小于1024时 执行以下css代码 */

        @media all and (max-width: 1024px) {

            div:first-child{

                background-color: yellowgreen;

            }

            *{

                margin: 0;

                padding: 0;

            }

            html{

                font-size: 32px;

            }

        }

        @media only screen and (min-width: 1280px) {

            div:first-child{

                background-color: pink;

            }

            html{

                font-size: 64px;

            }

        }

        @media all and (min-width: 1024px) and (max-width: 1280px){

            div:first-child{

                background-color: red;

            }

            html{

                font-size: 48px;

            }

        }

        @media only print {

            .waterPrint{

                display: block;

            }

        }