修复大屏幕的角度材质响应布局

下面的代码完美适用于超小型，中小型的screans。对于大屏幕出于某种原因，即使四个div根据需要水平对齐，而不是采用孔屏幕，它们只占用左侧的一小部分。修复大屏幕的角度材质响应布局

这里是我的代码：

<html lang="en" > 
    <head> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <style> 
     .box {   
      color:white; 
      padding:10px; 
      text-align:center; 
      border-style: inset; 
     } 
     .green { 
      background:green; 
     } 
     .blue { 
      background:blue; 
     } 
     .brown { 
      background:brown; 
     } 
     .red { 
      background:red; 
     } 
     </style> 
     <script language="javascript"> 
      angular 
      .module('firstApplication', ['ngMaterial']) 
      .controller('layoutController', layoutController); 

      function layoutController ($scope) {    
      } 
     </script>  
    </head> 
    <body ng-app="firstApplication"> 

     <div id="layoutContainer" ng-controller="layoutController as ctrl" layout-lg="row" layout-md="column" layout-sm="column" layout-xs="column"> 
     <div layout="row" layout-xs="column"> 
      <div flex class="green box">Item 1</div> 
      <div flex class="blue box">Item 2</div> 
     </div> 
     <div layout="row" layout-xs="column"> 
      <div flex class="brown box">Item 3</div> 
      <div flex class="red box">Item 4</div> 
     </div> 
     </div> 

    </body> 
</html>

感谢

来源

2016-11-09 Karim Mtl

，我发现是与柔性相结合的修复：

<html lang="en" > 
    <head> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <style> 
     .box {   
      color:white; 
      padding:10px; 
      text-align:center; 
      border-style: inset; 
     } 
     .green { 
      background:green; 
     } 
     .blue { 
      background:blue; 
     } 
     .brown { 
      background:brown; 
     } 
     .red { 
      background:red; 
     } 
     </style> 
     <script language="javascript"> 
      angular 
      .module('firstApplication', ['ngMaterial']) 
      .controller('layoutController', layoutController); 

      function layoutController ($scope) {    
      } 
     </script>  
    </head> 
    <body ng-app="firstApplication"> 

     <div id="layoutContainer" ng-controller="layoutController as ctrl" layout="row" layout-md="column" layout-sm="column" layout-xs="column"> 
     <div flex-gt-md="50" layout="row" layout-xs="column"> 
      <div flex class="green box">Item 1</div> 
      <div flex class="blue box">Item 2</div> 
     </div> 
     <div flex-gt-md="50" layout="row" layout-xs="column"> 
      <div flex class="brown box">Item 3</div> 
      <div flex class="red box">Item 4</div> 
     </div> 
     </div> 

    </body> 
</html>

来源

2016-11-09 20:18:44

修复大屏幕的角度材质响应布局

回答

相关问题