移动端布局方式

媒体查询(Media Queries)

1. 媒体查询介绍
   浏览器根据不同的窗口尺寸来选择使用不同的样式。
2. 语法
   @media 设备类型 and (设备特性)｛样式代码｝
3. 外部样式表

<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 400px)" 
  href=“tinyScreen.css” 
/>

3. 内部样式

@media only screen and (max-width: 767px) {
  .filter {
    //...
  }
}