Question

我正在学习网页的响应式设计。在学习过程中，我创建了一个基本页面部分，它看起来很好，但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 响应式设计中表单元素的注意事项。
另外，我是否需要Viewport Meta Tag。我认为我的网页没有任何好处当我在笔记本电脑浏览器上调整网页大小时。

Answer 1

以下是仅限CSS的解决方案，可能适用于您，也可能不适用于您：

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

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

我在css中添加了评论，并没有更改任何HTML。

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

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

html {font-size: 100%}

此外，视口标记仅适用于移动设备。

Answer 2

我得到了约。溶液

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

我将它应用于输入和textarea但是没有用。那么，究竟需要哪个元素呢？

表单元素的响应式设计

2 个答案: