html 角材料柔韧响应

Posted 2021-05-10

https://material.angularjs.org/latest/layout/introduction

<div layout="row" layout-wrap>

    <div flex="100" flex-sm="50" flex-gt-sm="20" flex-gt-md="80" style="background-color: #CA0000">
        1
    </div>

    <div flex="100" flex-sm="50" flex-gt-sm="80" flex-gt-md="20" style="background-color: #FFFF00">
        2
    </div>
</div>


-=-=-=-=- OTRO EJEMPLO -=-=-=-=-

<div layout="row" layout-wrap>

  <md-input-container flex="100" flex-sm="100" flex-gt-sm="20" flex-gt-md="20">
    <label>Número</label>
    <input requerido="" invalidmsg="El número es requerido" type="text" ng-model="boleta.numero" >
  </md-input-container>
    
  <md-input-container flex="100" flex-sm="100" flex-gt-sm="20" flex-gt-md="20">
      <label>Nombre</label>
      <input requerido="" invalidmsg="El nombre es requerido" type="text" class="form-control" ng-model="boleta.nombre" >
  </md-input-container>
  
  <md-input-container flex="100" flex-sm="100" flex-gt-sm="20" flex-gt-md="20">
      <label>Tipo de boleta</label>
      <md-select ng-model="data.tipoBoletaSelected" required>
          <md-option ng-repeat="opt in boleta.tipos" value="{{opt.consecutivo}}">{{opt.nombre}}</md-option>
      </md-select>
  </md-input-container>
  
  <md-input-container flex="100" flex-sm="100" flex-gt-sm="20" flex-gt-md="20">
      <label>Nombre</label>
      <input requerido="" invalidmsg="El nombre es requerido" type="text" class="form-control" ng-model="boleta.nombre" >
  </md-input-container>
  
  <md-input-container flex="100" flex-sm="100" flex-gt-sm="20" flex-gt-md="20">
      <label>Nombre</label>
      <input requerido="" invalidmsg="El nombre es requerido" type="text" class="form-control" ng-model="boleta.nombre" >
  </md-input-container>
</div>