variables.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435
  1. // Media queries breakpoints
  2. // Extra small screen / phone
  3. $width-grid_screen-xs: 480px; // 超小尺寸设备 - 手机
  4. $width-grid_screen-xs-min: $width-grid_screen-xs;
  5. // Small screen / tablet
  6. $width-grid_screen-sm: 576px; // 小尺寸设备 - 平板
  7. $width-grid_screen-sm-min: $width-grid_screen-sm;
  8. // Medium screen / desktop
  9. $width-grid_screen-md: 768px; // 中尺寸设备 - 水平平板
  10. $width-grid_screen-md-min: $width-grid_screen-md;
  11. // Large screen / wide desktop
  12. $width-grid_screen-lg: 992px; // 大尺寸设备 - 小尺寸桌面端
  13. $width-grid_screen-lg-min: $width-grid_screen-lg;
  14. // Extra large screen / full hd
  15. $width-grid_screen-xl: 1200px; // 超大尺寸设备 - 桌面端
  16. $width-grid_screen-xl-min: $width-grid_screen-xl;
  17. // Extra extra large screen / large desktop
  18. $width-grid_screen-xxl: 1600px; // 超大尺寸设备 - 桌面端 HD
  19. $width-grid_screen-xxl-min: $width-grid_screen-xxl;
  20. // provide a maximum
  21. $width-grid_screen-xs-max: ($width-grid_screen-sm-min - 1px);
  22. $width-grid_screen-sm-max: ($width-grid_screen-md-min - 1px);
  23. $width-grid_screen-md-max: ($width-grid_screen-lg-min - 1px);
  24. $width-grid_screen-lg-max: ($width-grid_screen-xl-min - 1px);
  25. $width-grid_screen-xl-max: ($width-grid_screen-xxl-min - 1px);
  26. // Grid system
  27. $width-grid_columns: 24; // 栅格宽度
  28. $width-grid_gutter: 0; // 槽宽度