修復大屏幕的角度材質響應佈局

下面的代碼完美適用於超小型，中小型的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

修復大屏幕的角度材質響應佈局

回答

相關問題