怎样使用@media 媒体查询自适应网页窗口

“媒体类型（判断条件）+ CSS（符合条件的样式规则）”

<style>
    @media  媒体类型  and  （媒体特性）{ 
            CSS样式 
    }
</style>


<-- 例子：最大500px 下 背景yellow -->

<style>
  @media screen and (max-width:500px) {
            body{
                background-color: yellow;
            }
        }

 </style>

引入方式：

@media方式：

@media 媒体类型 {
        选择器{ /*样式代码写在这里…*/}
} 

link方法：  

<link  rel="stylesheet"  href="style.css"  media="媒体类型" />