Question

我正在使用AngularJS和Angular Material。我正在制作登录表单，但我遇到了问题，当我看到登录表单时，它在智能手机上非常小。

我如何使表格适应屏幕或使其在屏幕上更大？

笔记本：

代码：

＆＃13;

<body layout="row" style="background:#0277bd;" ng-cloak>

    <div flex>

    </div>

    <div flex flex-sm="80" flex-md="65" flex-gt-md="80" flex-gt-lg="33" layout="column" layout-align="center">
      <div>
        <div layout="row" layout-align="center">
          <img src="images/boxapp2.png" class="img-responsive" alt="" />
        </div>
        <md-card layout-padding>
          <form layout="column">

            <md-input-container flex>
              <label>Usuario</label>
              <input ng-model="login.username" name="userName" required>
            </md-input-container>

            <md-input-container flex>
              <label>Contraseña</label>
              <input ng-model="login.contrasena" type="password" required>
            </md-input-container>
              <md-button class="md-raised md-primary">Ingresar</md-button>
            </form>

            <span><i class="fa fa-lock"></i> Accediendo desde: <?php echo $ip; ?></span>


        </md-card>
      </div>
    </div>

    <div flex>

    </div>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.js"></script>
    <script type="text/javascript">
    angular.module("loginboxapp",['ngMaterial','ngRoute'])
    .config(function($mdThemingProvider,$routeProvider){
      $mdThemingProvider.theme('default')
          .primaryPalette('blue')
          .accentPalette('light-blue');
      })
    .controller("loginCTRL",function($scope){

    })
    </script>
  </body>

＆＃13;

Answer 1

您可以尝试将视口元标记添加到模板的head部分。

<meta name="viewport" content="width=device-width, initial-scale=1">

此处提供更多信息：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

或

您可以使用媒体查询/断点手动设置这些样式：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

您已经将表单的宽度设置为居中80％，这就是您所拥有的。

你的身体有一个行布局，里面有三个div。在第二个div中设置flex-sm =“80”，这意味着这个div将占用小型设备屏幕宽度的80％，第一个和第三个div将分别获得10％。

您可以轻松更改此设置并使用全屏宽度。例如，如果您想在小型设备上使用100％，在中型设备上使用80％，在其他设备上使用65％，那么就像这样设置您的div

<div flex-sm="100" flex-md="80" flex-gt-md="65" >
  
 </div>

点击此处Angular material grid system

如何使表单适应屏幕？

2 个答案: