具有不同小部件的响应式设计

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 时显示。