Question

我需要使用HTMl和CSS创建响应式表单。在此表单中，输入字段用于输入电话国家/地区分机。当您在输入内部单击时：

在桌面上：附加到输入的下拉列表会显示一个搜索字段以过滤可能性。
在移动设备上：覆盖整个页面的模式显示相同的搜索字段和可能性列表。还会添加关闭按钮以返回页面。

为正确的设备显示正确的窗口小部件的最佳方法是什么（例如，我们不希望模式显示在桌面上）？

Answer 1

您需要使用媒体查询来表示应根据屏幕大小显示哪些功能。

第一步是创建在桌面上查看时使用的表单布局，以及在移动设备上查看时使用的表单布局。

// index.html

// Web Form layout

<form id="web-form">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>


// Mobile Form Layout

<div id="mobile-form">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <form id="mobile-form">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </form>
        </div>
    </div>
  </div>
</div>

通过ID创建和声明这两种表单，我们现在将mobile-form ID设置为display: none。只有当设备宽度达到768px时，我们才会将其更改为display: block，并将web-form修改为display: none。

// common.css 

#web-form {
  // whatever_styling_you_want
}

#mobile-form {
  display: none;
}

@media (max-width: 768px) {
  #web-form {
    display: none;
  }
  #mobile-form {
    display: block;
  }
}

使用此媒体查询，当用户在宽度小于768像素的屏幕上查看您的应用时，#web-form将被隐藏，而#mobile-form将会显示。通过将模式隐藏在#mobile-form内，只有在显示#mobile-form时才会显示。

使用不同小部件的响应式设计

1 个答案: