37 - 其他属性 - @media (){} - 窗口适应

作用：窗口大小决定css样式

方式1

 /*手机*/
@media (max-width: 768px)
{
    .media1{
        width:400px;
    }
}
 /*平板*/
@media (min-width: 768px) and (max-width: 979px)
{
    .media1{
        width:400px;
    }
}
 /*PC*/
@media (min-width: 979px)
{
    .media1{
        width:400px;
    }
}

方式2

<style>
 /*手机*/
 @media screen and (max-width:600px){
     .box_2 {
         padding-top: 45px;
     }
 }
 /*平板*/
 @media screen and (min-width:600px) and (max-width:960px){
     .box_2 {
         padding-top: 45px;
     }
 }
 /*PC*/
 @media screen and (min-width:960px){
     .box_2 {
         padding-top: 45px;
     }
 }
    </style>