调整 Angular 5 代码以显示在手机上答案

【问题标题】：adjust angular 5 code to display on cell phones调整 Angular 5 代码以显示在手机上
【发布时间】：2018-08-28 13:57:08
【问题描述】：

我是 Angular 的新手... 我有一个也需要在手机上工作的 Angular 应用程序。我正在使用 primeNG 网格将屏幕划分为列（class="ui-g"），因此每行有 12 列

https://www.primefaces.org/primeng/#/grid

但据我了解，在蜂窝显示中，列数较少？这样，当我更改屏幕的像素（使用 F12 并更改屏幕大小）时，我看到列数较少
开发一个也支持所有屏幕尺寸的角度应用程序的正确方法是什么？我的意思是它会按比例缩小屏幕并且不改变列数

更新这是我正在使用的代码（我移动了逻辑 - 只有 html）但是当试图在手机上查看它时，单元格并不相邻）

<div class="ui-g ui-sm ui-md">
  <div class="ui-g-12  ui-sm-12  ui-md-12">
    <div class="ui-g-7 ui-sm-7 ui-md-7">


      <div class="ui-g  ui-sm ui-md">
        <div class="ui-g-12  ui-sm-12 ui-md-12">
          <div class="ui-grid-row">
            <div class="ui-g-12  ui-sm-12 ui-md-12 ui-md-12">
              Please provide us with feedback with your experience ,your rate and/or leave comments
              <br> this is to help us provide you with a better service
            </div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-g-2 ui-sm-2 ui-md-2">First name *</div>
            <div class="ui-g-1 ui-sm-1 ui-md-1"></div>
            <div class="ui-g-2 ui-sm-2 ui-md-2">Last name *</div>
          </div>
          <div class="ui-grid-row">
            <input class="ui-g-2 ui-sm-2 ui-md-2" type="text" pInputText name="firstName" maxlength="20" />
            <div class="ui-g-1 ui-sm-1 ui-md-1"></div>
            <input class="ui-g-2 ui-sm-2 ui-md-2" type="text" pInputText name="lastName" maxlength="20" />
          </div>
          <div class="ui-grid-row">
            <div class="ui-g-2 ui-sm-2 ui-md-2">Middle name</div>
          </div>
          <div class="ui-grid-row">
            <input class="ui-g-2 ui-sm-2 ui-md-2" type="text" pInputText name="middleName" maxlength="20" />
          </div>
          <div class="ui-grid-row">
            <div class="ui-g-2 ui-sm-2 ui-md-2">UMN *</div>
            <div class="ui-g-1 ui-sm-1 ui-md-1"></div>
            <div class="ui-g-2 ui-sm-2 ui-md-2">Phone number *</div>
          </div>
          <div class="ui-grid-row">
            <input class="ui-g-2 ui-sm-2 ui-md-2" type="text" pInputText name="umn" maxlength="15" />
            <div class="ui-g-1 ui-sm-1 ui-md-1"></div>
            <input class="ui-g-2 ui-sm-2 ui-md-2" type="text" pInputText name="phoneNumber" maxlength="10" />
          </div>
          <div class="ui-grid-row">
            <br> Service experience *
          </div>
          <div class="ui-grid-row">
            <div class="ui-g-12  ui-sm-12  ui-md-12">
              <p-radioButton name="quickFeedBackGrade" value="1" label="Very poor"></p-radioButton>
              <p-radioButton name="quickFeedBackGrade" value="2" label="Poor"></p-radioButton>
              <p-radioButton name="quickFeedBackGrade" value="3" label="Good"></p-radioButton>
              <p-radioButton name="quickFeedBackGrade" value="4" label="Very good"></p-radioButton>
              <p-radioButton name="quickFeedBackGrade" value="5" label="Excellent"></p-radioButton>

            </div>
            <div class="ui-g-3 ui-sm-3 ui-md-3">
              Comments
              <textarea rows="5" cols="60" pInputTextarea autoResize="autoResize" name="comments"></textarea>
            </div>
          </div>

        </div>
      </div>


    </div>
  </div>
</div>

应该是这样的

这是手机显示屏

【问题讨论】：

列的数量不会改变，这就是为什么您可以为 lg、md、sm 指定列，并利用内置的媒体查询来触发它们，这就是您的设计方式反应灵敏。您可能会更多地研究ui-lg-*、ui-md-*、ui-sm-* 以及它们的工作原理。干杯
手机也有12列？所以你说的是每次我有 ui-lg-* 我都需要添加 ui-sm-*?
是的，例如。 <div class="row"><div class="ui-md-6 ui-sm-12"></div><div class="ui-md-6 ui-sm-12"></div></div> 将为中型和大型屏幕在同一行上创建两列，然后将两个单元格堆叠在彼此的顶部以用于小型（移动）屏幕。网格不会改变它的结构，但你必须为其内容提供能力。
对不起，但我还是不明白......当你写 md-6 时，这不是意味着从中等设备开始，单元格的数量将是 6 个吗？为什么写 md-6 和 sm-12 的时候要说 2 列为中型和大型呢？不好意思，能不能多解释一下，非常感谢
您始终有 12 列可用，如果您将 6 列给一个单元格，将 6 列给另一个单元格，则组成一行 12。因此，两个单元格将有 6 列宽度在提供的宽度范围内一排。如果您在每个单元格上指定 12，则每个单元格将跨越完整的 12 列可用。我建议咨询the documentation 以获得更好的解释，所有 UI 框架（如引导程序、基础等）的大多数网格系统都以相同的方式工作。 :)

标签： angular

【解决方案1】：

所以看起来您没有遵循文档？如果您查看 sn-p 它更符合您所追求的目标，但如果您要经常使用它，我强烈建议您学习它的工作原理，否则只会让自己感到沮丧。例如，ui-grid-row 无效且不存在。此外，开始网格的父级需要 ui-g 才能将其声明为网格，而像 ui-g-3 ui-sm-3 ui-md-3 这样的声明是多余的，在这种情况下只需要 ui-g-3 一次。

无论如何，看看下面的变化。单选按钮不会显示，因为 sn-p 编辑器不支持角度组件 (PrimeNG)，但您可以将其直接粘贴到您的项目中，它会按预期工作。

祝你好运！ :)

.your-form label {
  display: block;
  font-weight: 700;
}

.your-form input, .your-form textarea {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui-all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui-all.css" rel="stylesheet"/>



<section class="ui-g your-form">
  <div class="ui-g-12">
    <p>Please provide us with feedback with your experience ,your rate and/or leave comments this is to help us provide you with a better service.</p>
  </div>
  <div class="ui-g-6 ui-sm-12">
    <label>First name *</label>
    <input type="text" pInputText name="firstName" maxlength="20" />
  </div>
  <div class="ui-g-6 ui-sm-12">
    <label>Last name *</label>
    <input type="text" pInputText name="lastName" maxlength="20" />
  </div>
  <div class="ui-g-6 ui-sm-12">
    <label>Middle name</label>
    <input type="text" pInputText name="middleName" maxlength="20" />
  </div>
  <div class="ui-g-6 ui-sm-12">
    <!-- just a generic space in case you wanted to add an input next to middle name later -->
  </div>
  <div class="ui-g-6 ui-sm-12">
    <label>UMN*</label>
    <input type="text" pInputText name="umn" maxlength="15" />
  </div>
  <div class="ui-g-6 ui-sm-12">
    <label>Phone number *</label>
    <input type="text" pInputText name="phoneNumber" maxlength="10" />
  </div>
  
  <div class="ui-g">
    <div class="ui-g-2 ui-sm-12">
      <p-radioButton name="quickFeedBackGrade" value="1" label="Very poor"></p-radioButton>
    </div>
    <div class="ui-g-2 ui-sm-12">
      <p-radioButton name="quickFeedBackGrade" value="2" label="Poor"></p-radioButton>
    </div>
    <div class="ui-g-2 ui-sm-12">
      <p-radioButton name="quickFeedBackGrade" value="3" label="Good"></p-radioButton>
    </div>
    <div class="ui-g-2 ui-sm-12">
      <p-radioButton name="quickFeedBackGrade" value="4" label="Very good"></p-radioButton>
    </div>
    <div class="ui-g-2 ui-sm-12">
      <p-radioButton name="quickFeedBackGrade" value="5" label="Excellent"></p-radioButton>
    </div>
    <div class="ui-g-2 ui-sm-12">
      <!-- generic spacer for extra option -->
    </div>
  </div>
  <div class="ui-g-12">
    <label>Comments</label>
    <textarea rows="5" cols="60" pInputTextarea autoResize="autoResize" name="comments"></textarea>
  </div>
</section>

【讨论】：

非常感谢 chris（仍有一些问题，但希望能解决）