Question

我有一个表格，如下面的代码？如何使其适合屏幕中心并将其转换为响应？

HTML5代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Search Form</title>
<link href="css/cbdb-search-form.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">

body {
background: #999;
}
</style>
</head>
<body>
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" /> 
</form>
</body>
</html>

CSS代码

/ ************************************ CSS 3搜索ZEAOS 的 ************************************ /

#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;

/* Gradients */
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

/* Rounded Corners */
border-radius: 17px; 
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); 
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="email"]{
background: #fafafa; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 250px;

/* Rounded Corners */
border-radius: 17px; 
-webkit-border-radius: 17px;
-moz-border-radius: 17px;

/* Shadows */
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
outline: none;
background: #fff; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)),  color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
background: #44921f;/* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)),   color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%,   rgb(62,135,28) 88%, rgb(49,114,21) 100%);

border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 84px;
outline: none;

/* Rounded Corners */
border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px;

/* Shadows */
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)),      color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%,     rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923; /* Fallback color for non-css3 browsers */

/* Gradients */
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)),   
color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1,  rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%,         rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

编辑1

这是一个移动网络应用程序。用户包括智能手机和最老的设备。

Answer 1

首先

删除HTML DOCTYPE或将其更改为<!DOCTYPE html>。 HTML5不基于SGML，因此不需要引用DTD。

以内容为中心

将表格包裹在DIV中

<body>
<div class="modal">
<form id="search-form">
<input type="email" />
<input type="submit" value="Login" /> 
</form>
</div>
</body>

然后将此CSS应用于屏幕中心。

.modal {
   position: fixed;   
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#search-form {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

要回应使用CSS Media Query

媒体查询允许您根据条件（屏幕大小，屏幕类型等）在您将看到该页面的屏幕上应用样式。

这只是一个简单的例子。我建议你阅读CSS媒体查询。

在这种情况下，您可以设置最小宽度和高度

@media ( max-width :320px) {
    .modal {
         min-width: 200px;
         min-height: 120px;
    }
}

@media ( min-width :321px) {
    .modal {
         min-width: 300px;
         min-height: 220px;
    }
}

@media ( min-width :640px) {
    .modal {
         min-width: 480px;
         min-height: 320px;
    }
}

@media ( min-width :1200px) {
    .modal {
         min-width: 700px;
         min-height: 400px;
    }
}

另一只手

您是否考虑过使用bootstrap？

Enjoy!

Answer 2

首先，制作响应式表单或其他任何内容总是在％age中提供width，然后提供媒体查询。您可以使用引导程序使页面更好。你可以从getbootstrap.com/获得引导程序。那里提到了使用和实现技术

Answer 3

要居中，请添加

width: 365px;
height:38px;

position:absolute;
top:50%;
margin-top:-19px;
left:50%;
margin-left:-182px;

在＃search-form

中

对于响应，这可能是一个起点：

    @media all and (max-width:480px) {

#search-form {
    width:100%;
    margin-left:-50%;
}

input[type="email"]{
    width:70%;
}

input[type="submit"]{
    width:20%;
}

}

Answer 4

居中添加位置：相对于正文

然后将这些规则添加到#ss的

#search-form{
  margin:auto;
  position:absolute;
  z-index: 30;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width: 300px; /*variable*/
  height: 300px;  /*variable*/
        }

如何使HTML5表单响应？

4 个答案:

首先

以内容为中心

要回应使用CSS Media Query

另一只手