媒体查询

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型(mediatype)

• all 用于所有设备
• print 用于打印机预览
• screen 用于电脑屏幕，平板电脑，智能手机等
• speech 应用于屏幕阅读器

媒体功能(media feature)

• max-height : 定义输出设备中的页面最大可见区域高度
• min-height : 定义输出设备中的页面最小可见区域高度

例子

/* cloud css */
/* 小于570px,不显示云 */
@media screen and (min-width: 570px) {
  .cloud {
    height: 110px;
  } 
  #cloud1 {
    vertical-align: bottom;
    animation: fadeInLeft 2s 0s 1;
  }
  #cloud2{
    animation: fadeInRight 2s 0s 1;
  }
}
@media screen and (max-width: 570px) {
  .cloud {
    display: none;
  }
}