0

我正在学习网页的响应式设计。在学习过程中，我创建了一个基本的页面部分，它看起来不错，但是 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 注意事项。

  • 另外，我需要视口元标记吗？当我在笔记本电脑浏览器上调整网页大小时，我的网页没有任何好处。

4

2 回答 2

1

这是一个仅适用于您的 CSS 解决方案，可能对您有用，也可能不适用：

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

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

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

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

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

html {font-size: 100%}

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

于 2013-07-19T18:29:01.280 回答
0

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

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

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

于 2013-07-19T13:05:17.923 回答