Отзывчивый дизайн элементов формы

Я изучаю отзывчивый дизайн веб-страниц. Во время обучения я создал основные разделы страницы, и он выглядит отлично, но элементы веб-формы не отвечают должным образом на изменение размера браузера. Вот код, я написал:Отзывчивый дизайн элементов формы

<!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. Я не вижу преимуществ на своей веб-странице , когда я изменяю размер веб-страницы в браузере для ноутбуков.

источник

2013-07-19 Satya Prakash

Я получил прибл. решение.

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

Я применил его для ввода и textarea, но это не сработало. Итак, какой элемент ему нужен?

источник

2013-07-19 13:05:17

Вот CSS единственное решение, которое может или не может работать для вас:

оригинал: http://jsfiddle.net/brandonbabb/JnPBm/

модифицирована: http://jsfiddle.net/brandonbabb/gM8fp/

Я добавил комментарии в CSS и не изменить любой HTML.

Я рекомендую большинству людей не использовать значения em, если вам не нужно. ems трудно интерпретировать, если у вас нет большого опыта работы с ними, они также менее интуитивно понятны, чем процентные значения на первый взгляд.

Не забудьте добавить следующий код каждый раз, когда с помощью EMS:

html {font-size: 100%}

Кроме того, окно просмотра тегов только для мобильных устройств.

источник

2013-07-19 18:29:01

Я вижу, что это хорошо. Но не уверен, что вы там делали, когда я снимал ваш css один за другим, и он все еще работал. Ваши предложения выглядят важными. Проголосовал. –

Любые комментарии к моему выше комментарию по размеру коробки. Где именно это необходимо для этой разметки? –

Наиболее важной частью изменений, которые я сделал, был следующий код: #frmterm {top: 20px; внизу: 20px; слева: 20px; право: 20px; position: absolute;} Вы должны провести некоторое исследование абсолютного позиционирования внутри относительных позиционированных элементов. –

Отзывчивый дизайн элементов формы

ответ

Смежные вопросы