角度材料网格xs不工作

Question

<md-grid-list md-cols-lg="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2" md-gutter="3em" md-row-height='250px'>
       <md-grid-tile><div>one</div></md-grid-tile>
       <md-grid-tile><div>two</div></md-grid-tile>
       <md-grid-tile> <div>three</div> </md-grid-tile>
       <md-grid-tile>  <div>four</div></md-grid-tile>
 </md-grid-list>

This is working fine in sm , md and lg but not working in xs (extra small devices)

Answer 1

Well I've pasted your html and it's working on this codepen

<div ng-controller="AppCtrl" ng-app="MyApp">
   <md-grid-list md-cols-lg="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2" md-gutter="3em" md-row-height='250px'>
      <md-grid-tile><div>one</div></md-grid-tile>
      <md-grid-tile><div>two</div></md-grid-tile>
      <md-grid-tile> <div>three</div> </md-grid-tile>
      <md-grid-tile>  <div>four</div></md-grid-tile>
   </md-grid-list>
</div>

What's the error you are getting?

Update

Since Material is strictly looking for md-cols attribute you need to define a md-cols="[col number you want]" as default and then use query definitons to change the value. Such as:

   <md-grid-list md-cols="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2">
   </md-grid-list> 

please note that this default value will be affecting all the screen sizes you don't cover with queries.