在mobileangularui中更改@media屏幕大小 [英] Change @media screen sizes in mobileangularui

问题描述

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

我知道mobileangularui使用引导CSS和组件写的Angular JS。我在我的项目中测试引导的响应网格。

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

• xs：


• 
  
• sm：768px及以上。


• md：992px及以上。 ：1280像以上。

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

解决方案

打开 $

$

$

编辑以下变量值：

  @ 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。

I am just starting a project in PhoneGap, Angular JS and mobileangularui.

I am aware that mobileangularui uses bootstrap CSS and has components written in Angular JS. I am testing the responsive grid of bootstrap in my project.

The default screen sizes defined in bootstrap for breakpoints are:

• xs: 480px and up.
• sm: 768px and up.
• md: 992px and up.
• lg: 1280px and up.

I would like to change these to custom values. If I was using bootstrap (without mobileangularui), I would have customized the values here and downloaded the CSS. But, how do I make these changes in mobileangularui?

解决方案

Open the variables.less in <project-directory>\bower_components\bootstrap\less.

Edit the following variable values:

@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);

Run gulp build again.

This will overwrite the app.min.css, responsive.min.css in your project with new screen size values.

这篇关于在mobileangularui中更改@media屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！