表单元素的响应式设计答案

【问题标题】：Responsive Design of Form Elements表单元素的响应式设计
【发布时间】：2013-07-19 11:28:50
【问题描述】：

我正在学习网页的响应式设计。在学习过程中，我创建了一个基本的页面部分，它看起来不错，但 Web 表单元素没有正确响应浏览器调整大小。这是我写的代码：

    <!doctype html>
    <html>
    <head>
    <title>Term</title>
    <link rel="stylesheet" href="reset.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
    body {

        font-size:1em;
        text-align: center;
    }
    #header { 
        height: 5em;
                background:#e2ebc3;
                max-width:1300px;
    }

    #mainContent {
        width: 69%;
        max-width:900px;
        min-width:300px;
        float: left;
        background:#F2F5F4;
            position: relative;
    }

    #sideContentWrapper {
        max-width:400px;
        min-width:150px;
        width: 30%;
        float: left;
        margin-right:0.5em;
    }
    #sideContent {
        margin-left: 1em;
        min-height: 20em;
        background:#F4F2F5;
    }

        label {
            float: left;
            width: 6em;
            text-align: left;
        }
        #frmterm {
            padding: 2em;
            width: 90%;
            max-width:800px;
            position: relative;
        }

        /* form elemnts are not working properly. Do I need the below css? */
        #frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;}

        #frmterm, li {
            text-align: left;
            margin-bottom: 1.5em;
            width: 100%;
        }
        #frmterm input {
            width: 80%; 
        }

        #frmterm textarea {
            width: 80%;
            height:200%;
            display: block; 
        }

        #frmterm fieldset:nth-child(2)  {
            text-align: center;
        }

    @media screen and (max-width:800px) and (min-width:540px)
    {
        /* Tablets */
        #sideContentWrapper {
            min-width:150px;
            width: 30%;
            float: right;
            margin-right:0.25em;

        }
        #sideContent {
            margin-left: 0.5em;
            min-height: 20em;
            background:#999; /*  marker */
        }

    }
    @media screen and (max-width:540px)
    {
        /* Smartphone */

                #frmterm, li {margin-bottom: 0.5em;}

        #sideContentWrapper {

            display:none;
        }
        #mainContent {
            width: 100%;
        }

        </style>
    </head>
    <body>

<div id="header">Header</div>

<div id="mainContent">

      <form action="" id="frmterm">
          <fieldset>
              <legend>
                  <ol>
                      <li><label for="terms">Term:</label><input id="terms" type="text" value="" /></li>
                      <li><label for="summary">Summary:</label><input id="summary" type="text" value="" /></li>
                      <li><label for="category">Category:</label><textarea id="category"  ></textarea></li>

                  </ol>
              </legend>
          </fieldset>
          <fieldset>
              <button type="submit">Submit</button>
          </fieldset>
      </form>
</div>

<div id="sideContentWrapper">
    <div id="sideContent">
   Side Content
 </div>
</div>
    </body>
    </html>

可以看到问题的示例解决方案：

在 980*1280 时，表单元素正在触摸侧边栏，而我为表单元素提供了 80% 的宽度。为了报告这一点，我使用了 Firefox 的响应式设计视图。

以下代码对上述问题有所帮助：

#frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;}

但我不知道为什么我需要在 CSS 中提及它。

我对 HTML 的改进不太感兴趣，除非那是强制的。我正在学习它，所以我正在一个一个地学习它。我想要使用 CSS 更正它。如果可能，请提供重要的 CSS 响应式设计中表单元素的注意事项。
另外，我需要视口元标记吗？我的网页没有任何好处当我在笔记本电脑浏览器上调整网页大小时。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

这是一个纯 CSS 的解决方案，可能适合您，也可能不适合您：

原文：http://jsfiddle.net/brandonbabb/JnPBm/

修改：http://jsfiddle.net/brandonbabb/gM8fp/

我在 css 中添加了 cmets 并没有更改任何 html。

我建议大多数人不要使用 em 值，除非你需要。除非您有丰富的使用经验，否则 em 很难解释，乍一看，它们也不如百分比值直观。

记得在使用 ems 时添加以下代码：

html {font-size: 100%}

另外，viewport 标签仅适用于移动设备。

【讨论】：

我觉得它现在很好看。但不确定你在那里做了什么，因为我正在一个一个地删除你的 css 并且它仍然有效。你的建议看起来很重要。投票赞成。
对我上面关于 box-sizing 的评论的任何评论。这些标记到底需要在哪里？
我所做的更改中最重要的部分是以下代码：#frmterm{top:20px;底部：20px；左：20px；右：20px； position: absolute;} 你应该对相对定位元素内部的绝对定位做一些研究。
* 符号表示所有元素都在使用它，这可能是 box sizing 的最佳实现，所以你的 box sizing 代码就可以了。
嗯！我没有注意到你所做的绝对定位。尽管在本地，这种变化并没有做任何事情。关于盒子尺寸，我正在考虑在确切需要它的地方应用最小数量的元素。但是你说适用于所有人都很好。所以，我会离开思考这个问题。谢谢。

【解决方案2】：

我得到了大约。解决方案。

* { 
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

我将它应用于输入和文本区域，但没有奏效。那么，究竟是哪个元素需要它呢？

【讨论】：