错误!终端不支持 JavaScript ,请打开 JavaScript 功能!
BootStrap 中 Grid 断点的变量
目录
【原创】 🐣 【文章】

BootStrap 中 Grid 断点的变量


BootStrap 作为做流行的前端框架,在设计方面肯定是无可挑剔,那么 BootStrap 中的 Grid 变量是多少呢?

在 BootStrap 设计体系中,终端设备屏幕的尺寸可分为xs、sm、md、lg、xl,而每一个尺寸对应一个断点变量,变量如下:

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

使用方法如下:

@include media-breakpoint-up(sm) {
    html {
        font-size: 1.0rem;
    }
}

@include media-breakpoint-up(md) {
    html {
        font-size: 1.0rem;
    }
}

@include media-breakpoint-up(lg) {
    html {
        font-size: 1.0rem;
    }
}

打开手机扫描阅读

30
2020-08-11 09:54:43
语音播报