html响应式页面 （@media）

 一、媒体特性语法

@media  媒体类型  and  （媒体特性）{

        CSS样式

}

 二、案例演示

当终端宽度大于1300像素时（常见于电脑屏幕）

        @media screen and (min-width: 1300px){
            .mid{
                width: 1300px;
                height: auto;
                margin: 0px auto;
            }
            .mid dt dd:nth-child(1) img{
                width:250px;
            }
            .mid dl{
                width: 254px;
            }
        }

当终端宽度在768像素与1300像素时（常见于ipad）

        @media screen and (min-width: 768px) and (max-width: 1300px) {
            .content {
                background-color: pink;
                width: 768px;
                padding: 20px 60px;
                margin: 0px auto;
            }
        }

当终端宽度小于768像素时（常见于手机） 

        @media screen and (max-width: 768px){
            .content {
                background-color: orange;
                width: 350px;
                padding: 20px 60px;
                margin: 0px auto;
            }
        }