在所有设备中移动友好和超级响应

我们的响应机制让您感觉它专为您使用的设备而设计，无论是哪种设备。

• 媒体查询

  /*========== 移动优先方法 ==========*/ 
   
   /* 自定义，iPhone Retina */ 
   @media only screen and (min-width : 320px){ 
   } 
   / * 超小设备、手机 */ 
   @media only screen and (min-width : 480px){ 
   } 
   /* Small devices, Tablets */ 
   @media only screen and (min-width : 768px){ 
  
   } 
   /* Medium Devices, Desktops */ 
   @media only screen and (min-width : 992px){ 
  
   } 
   /* 大设备，宽屏 */ 
   @media only screen and (min-width : 1200px){ 
  
   } 
   /*========= = 非移动优先方法 ==========*/ 
   /* 大型设备，宽屏幕 */ 
   @media only screen and (max-width : 1200px){ 
  
   }
   /* 中型设备，桌面 */ 
   @media only screen and (max-width : 992px){ 
  
   } 
   /* Small Devices, Tablets */ 
   @media only screen and (max-width : 768px){ 
  
   } 
   /* Extra Small Devices,手机 */ 
   @media only screen and (max-width : 480px){ 
  
   } 
   /* Custom, iPhone Retina */ 
   @media only screen and (max-width : 320px){ 
  
   }

• 网格系统

  我们使用 bootstrap 的网格系统来创建布局和页面，这里是 bootstrap less 中使用的网格变量的快速列表，每个变量表示屏幕的大小，如果网格可以添加到变量的末尾，则表示数字。即 xs-1,xs-2,xs-3 .... xs-12。

  xs: 0, 
    // 小屏/手机
    sm: 544px, 
    // 中屏/平板
    md: 768px, 
    // 大屏/桌面
    lg: 992px, 
    // 超大屏/宽桌面
    xl: 1200px