在移动角度 ui 中更改 @media 屏幕尺寸

Question

我刚刚在 PhoneGap、Angular JS 和 mobileangularui 中开始一个项目。

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

在引导程序中为断点定义的默认屏幕尺寸是：

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

我想将这些更改为自定义值。如果我使用引导程序（没有 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。