随着科技的发展，出现了不同分辨率屏幕大小的终端设备，为了让不同屏幕大小的智能设备上能直观的展示内容，我们在做网页的时候会进行兼容性处理。在html开发使用css样式时，一般使用@media screen来进行处理。

@media screen实现屏幕自适应内容

@media screen优点 ： 无需插件，能够适应各种窗口大小，只需在CSS中添加@media screen属性。

其中我们要记住的是：屏幕宽度大于多少像素（max-width: 1200px）和屏幕宽度小于多少像素（min-width: 1200px），再结合@media screen语法就很容易做网页兼容性处理。

例：

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
}
@media screen and (max-width: 1200px){
    h5{
        color: #eee;
    }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
    h5{
        color: red;
    }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
    h5{
        font-size: 20px;
    }
}