角材料设计布局自定义尺寸 [英] Angular Material Design Layout custom sizes
问题描述
如何为不同尺寸的屏幕添加自定义flex属性?
参考这里的规范: https://material.angularjs.org/latest /#/ layout / options
How to add custom flex attributes for different sizes of the screen? Referring to the spec here : https://material.angularjs.org/latest/#/layout/options
例如,flex属性
flex-gt-lg
在宽度大于1200像素的设备上设置flex。我想添加一个更多的属性说,像 flex-gt-lgx
它设置flex大于1600px宽的设备,角材料不提供支持。如何做这样的事情?
For example, the flex attribute
flex-gt-lg
Sets flex on devices greater than 1200px wide. I want to add one more attribute say something like flex-gt-lgx
which sets flex on devices greater than 1600px wide, for which angular material does not provide support. How will do something like this?
推荐答案
我写了一个媒体查询如下:
I wrote a media query as follows :
@media only screen and (min-width: 1601px) {
[flex-gt-lgx="25"] {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
}
}
并使用以下span标记
and used the following span tag
<span flex-md="10" flex-sm="5" flex-lg="15" flex-gt-lg="20" flex-gt-lgx="25" ></span>
它工作正常!
注意:这样做的一个好处是, flex-gt-lgx
始终设置为 25
值。
Note: Downside of doing this is that flex-gt-lgx
should be always set to 25
value.
这篇关于角材料设计布局自定义尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!