Question

由于不是每个人都会在计算机上浏览网页，我需要使用CSS来适应不同的屏幕尺寸。我正在处理注册表的前端部分register.php。问题是，在计算机上的字段名称和字段输入位置很好。但是，对于较小的屏幕（最大宽度为520px），我需要打开字段名称和字段输入彼此的顶部/底部，字段输入位于其字段名称之上。

HTML：

#formBody{
    border-radius: 10px;
    background-color: #3385ff;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 90%;
    max-width: 50em;
    margin: auto;
}
.field{
    margin: auto;
    width: 66.6%;
}
.fieldDescription{
    width: 33%;
    color: black;
    font-size: 1.2em;
}
.fieldInput{
    width: 33%;
    margin: auto;
}
.input{
    width: 100%;
    background-color: #e6f0ff;
    border-style: none;
}

CSS：

<div id="formBody">
    <table>
        <form>
            <tr class="field">
                <td class="fieldDescription">
                    <p>First Name:</p>
                </td>
                <td class="fieldInput">
                    <input class="input" name="firstname" type="text">
                </td>
            </tr>
        </form>
    </table>
</div>

我使用HTML表格为每个字段提供了自己的空间。我使用<tr>元素为每个字段创建一行，并使用两个<td>元素将字段名称和字段输入放在其自己的列中。这适用于计算机屏幕，但它不适用于较小的屏幕（如智能手机）。如果我使用<p class="fieldDescription">Fist Name:</p>之类的字段作为字段名称，然后使用<input class="fieldInput" name="firstName" type="text">作为字段输入，那么我只对小屏幕进行硬编码。

有没有办法满足两种屏幕尺寸，而无需对其进行硬编码？我宁愿不使用Javascript。我想做CSS。

Click here for the HTML

Click here for the CSS

（两者都在gist.github.com上）

Answer 1

我强烈建议您使用label和fieldset之类的valid and semantic form elements。但要解决你的问题：

@media screen and (max-width: 520px) {
  #mainContainer {
    border-radius: 5px;
  }

  #formBody {
    border-radius: 0px;
  }

  .fieldDescription,
  .fieldInput {
    width: 100%;
    display: inline-block;
  }

  .fieldDescription p {
    margin-bottom: 0;
  }
}

Answer 2

一些事情要讲：

您正在寻找的是制作响应式设计。你应该看看Media Queries
我强烈建议不要在这种情况下使用表格，只需在你真正需要表格时使用表格
以下是LIVE EXAMPLE，其中包含您想要执行的 HTML 和 CSS 代码。（调整浏览器大小以查看）。
尽量不要使用<p> <tr> <td>等方式设置表单样式...请改用<label>。

希望这项工作。

Answer 3

@media + display：block;应该基本上是你需要的：

@media screen and (max-width: 520px) {
  table,/* to spray whole space as block does */
  tbody,/* because it is there even not in the code :) */
  tr,/* this too must be a block */
  td /* goal to reach to start from */{
    display: block;
  }
}

@media screen and (max-width: 520px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    text-align: center;
  }
}
/* copy to match snippet size */

@media screen and (max-width: 700px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    text-align: center;
  }
}
/* warning */

legend {
  color: tomato;
}

<div id="formBody">
  <form>
    <fieldset>
      <legend>Put that form around the table not in between table & tr tags !!</legend>
      <table>
        <tr class="field">
          <td class="fieldDescription">
            <p>First Name:</p>
          </td>
          <td class="fieldInput">
            <input class="input" name="firstname" type="text">
          </td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>

demo including your style

在CSS中使用像break这样的东西

3 个答案: