Question

以下代码适用于超小型，中小型扫描仪。对于大屏幕由于某种原因，即使四个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>

由于

Answer 1

我找到的修复方法是与flex结合使用：

<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>

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

1 个答案: