[英]Change @media screen sizes in mobileangularui
I am just starting a project in PhoneGap , Angular JS and mobileangularui . 我只是在PhoneGap , Angular JS和mobileangularui中启动一个项目。
I am aware that mobileangularui uses bootstrap CSS and has components written in Angular JS. 我知道mobileangularui使用引导CSS并具有用Angular JS编写的组件。 I am testing the responsive grid of bootstrap in my project. 我正在测试项目中的引导程序响应式网格。
The default screen sizes defined in bootstrap for breakpoints are: 引导程序中为断点定义的默认屏幕尺寸为:
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. 如果我使用引导程序(没有mobileangularui),那么我将在此处自定义值并下载CSS。 But, how do I make these changes in mobileangularui? 但是,如何在mobileangularui中进行这些更改?
Open the variables.less
in <project-directory>\\bower_components\\bootstrap\\less
. 在<project-directory>\\bower_components\\bootstrap\\less
打开variables.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. 再次运行gulp build
。
This will overwrite the app.min.css, responsive.min.css in your project with new screen size values. 这将用新的屏幕尺寸值覆盖项目中的app.min.css,响应.min.css。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.