在mobileangularui中更改@media屏幕大小

Question

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

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

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

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

我想将这些更改为自定义值。 如果我使用引导程序（没有mobileangularui），那么我将在此处自定义值并下载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，响应.min.css。