我们在设计页面的时候经常会遇到自适应问题的解决，其实对于响应式的页面设计没有多么的复杂，简单的就是通过@media来查询设置对应的屏幕的大小，来做对应的样式处理就行了，那么下面就细数一下常见的查询方式

微小屏

屏宽大于等于576px时网格系统样式，通常为大屏手机或手机横屏

  @media (min-width: 576px) { ... }

小屏

屏宽大于等于768px时网格系统样式，通常为平板

@media (min-width: 768px) { ... }

中屏

屏宽大于等于1024px时网格系统样式，通常为笔记本电脑

 @media (min-width: 1024px) { ... }

大屏

屏宽大于等于1280px时网格系统样式，通常为桌面电脑或笔记本

  @media (min-width: 1280px) { ... }

特大屏

屏宽大于等于1680px时网格系统样式，通常为桌面电脑

  @media (min-width: 1680px) { ... }

其实没有什么神秘的不管是什么UI框架或者产品只要是自适应都逃不开这些判断。