在mobileangularui中更改@media屏幕大小

Question

我刚刚在 PhoneGap ， Angular JS 和 mobileangularui 中启动了一个项目。

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

在bootstrap中为断点定义的默认屏幕大小为：

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

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

Answer 1

打开variables.less中的<project-directory>\bower_components\bootstrap\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。