Responsive Style

Use the fxClass and fxStyle APIs to responsively apply styles to elements:

Sample Text #1

Use Responsive Styles

        <div
          fxFlex
          class="fxClass-all"
          ngClass.xs="fxClass-xs"
          [ngClass.sm]="{'fxClass-sm': hasStyle}"
          [ngClass.md]="{'fxClass-md': hasStyle, 'fxClass-md2': hasStyle}"
          [ngClass.lg]="['fxClass-lg', 'fxClass-lg2']">
        </div>

Sample Text #2

        <div
          style="font-style: italic"
          [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"
          [ngStyle.sm]="{'font-size.px': 20, color: 'lightblue'}"
          [ngStyle.md]="{'font-size.px': 30, color: 'orange'}"
          [ngStyle.lg]="styleLgExp">
        </div>