利用@media实现不同分辨率的兼容

@media可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。下面编程教程网小编给大家展示一下代码：

/* <768px */
@media screen and (max-width:768px) { 
  h1{
  	width: 100%;
  }
}
/* >=1024 and  */
@media screen and (min-width:1024px){
  h1{
      width: 49%;
  }
}
/* >=1024px and <1440px */
@media screen and (min-width:1024px) and (max-width:1440px){
  h1{
      width: 48%;
  }
}
/* >=1600px */
@media screen and (min-width: 1600px) {
  h1{
      width: 33%;
  }
}