在 mobileangularui 中更改@media 屏幕尺寸

Question

我刚刚在 PhoneGap、Angular JS 和 mobileangularui[=27] 中开始一个项目=].

我知道 mobileangularui 使用 bootstrap CSS 并且有用 Angular JS 编写的组件。我正在我的项目中测试 bootstrap 的响应式网格。

bootstrap 中为断点定义的默认屏幕尺寸为：

• xs：480 像素及以上。
• sm：768px 及以上。
• md：992px 及以上。
• lg：1280 像素及以上。

我想将这些更改为自定义值。如果我使用 bootstrap（没有 mobileangularui），我会自定义值 here 并下载 CSS。 但是，如何在 mobileangularui 中进行这些更改？

Answer 1

打开 <project-directory>\bower_components\bootstrap\less 中的 variables.less。

编辑以下变量值：

@screen-xs:                  480px;
@screen-sm:                  768px;
@screen-md:                  992px;
@screen-lg:                  1200px;

@container-tablet:             (720px + @grid-gutter-width);
@container-desktop:            (940px + @grid-gutter-width);
@container-large-desktop:      (1140px + @grid-gutter-width);

运行 gulp build 再一次。

这将用新的屏幕尺寸值覆盖项目中的 app.min.css、responsive.min.css。