角度材料设计布局自定义尺寸 [英] Angular Material Design Layout custom sizes

问题描述

如何为不同尺寸的屏幕添加自定义 flex 属性?参考这里的规范:https://material.angularjs.org/latest/#/layout/选项

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 在宽度大于 1200px 的设备上设置 flex.我想再添加一个属性，比如 flex-gt-lgx ，它在宽度大于 1600px 的设备上设置 flex，对此 angular material 不提供支持.怎么会做这样的事情?

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屋！