我正在学习网页的响应式设计。在学习过程中，我创建了一个基本的页面部分，它看起来不错，但 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 的响应式设计 View 。
下面的代码对上面的问题有一点帮助:
#frmterm fieldset,#frmterm fieldset legend, #frmterm fieldset ol, #frmterm fieldset li {width: 100%;}但我不确定为什么我需要在 CSS 中提及它。
我对 HTML 的改进不太感兴趣，除非那是 强制的。我正在学习它，所以我正在一个接一个地学习它。我想要 使用 CSS 更正它。如果可能，请提供重要的 CSS 响应式设计中表单元素的注意事项。
另外，我需要视口(viewport)元标记吗？我在我的网页上看不到任何好处 当我在笔记本电脑浏览器上调整网页大小时。
最佳答案
这是一个纯 CSS 的解决方案，可能适合也可能不适合您:
原创:http://jsfiddle.net/brandonbabb/JnPBm/
修改:http://jsfiddle.net/brandonbabb/gM8fp/
我在 css 中添加了注释，但没有更改任何 html。
我建议大多数人除非需要，否则不要使用 em 值。 em 很难解释，除非你有很多使用它们的经验，乍一看它们也不如百分比值直观。
记得在使用 ems 时添加以下代码:
html {font-size: 100%}
此外，viewport 标签仅适用于移动设备。
关于html - 表单元素的响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17745004/