Breakpoints

• 參考 Bootstrap：
  v3.3.7 Mobile First

  /* Extra small devices (phones, less than 768px) */
  /* No media query since this is the default in Bootstrap */
  
  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) { ... }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) { ... }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) { ... }
  

  v3.3.7 Desktop First

  /* Extra large devices (large desktops) */
  /* No media query since the extra-large breakpoint has noupper bound on its width */
  
  /* Large devices (desktops, less than 1200px) */
  @media (max-width: 1199px) { ... }
  
  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991px) { ... }
  
  /* Small devices (phones, less than 768px) */
  @media (max-width: 767px) { ... }
  

  v4.0.0-alpha.3 mobile

  /* Extra small devices (portrait phones, less than 544px) */
  /* No media query since this is the default in Bootstrap */
  
  /* Small devices (landscape phones, 544px and up) */
  @media (min-width: 544px) { ... }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { ... }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { ... }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) { ... }
  

  v4.0.0-alpha.3 mobile

  /* Extra large devices (large desktops) */
  /* No media query since the extra-large breakpoint has noupper bound on its width */
  
  /* Large devices (desktops, less than 1200px) */
  @media (max-width: 1199px) { ... }
  
  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991px) { ... }
  
  /* Small devices (landscape phones, less than 768px) */
  @media (max-width: 767px) { ... }
  
  /* Extra small devices (portrait phones, less than 544px) */
  @media (max-width: 543px) { ... }
  

• 也可以依需求加入其他 breakpoints。