Change @media screen sizes in mobileangularui

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/33795511/change-media-screen-sizes-in-mobileangularui