我有一个224w x 400h的图像。在图像上浮动是一种简单的形式。
我的目标是使包含图像+覆盖形式的div在移动设备上观看时占据整个屏幕。我尝试过使用媒体标题、视口元和大量css的各种组合,这些都是我从类似的堆栈溢出问题中拼凑出来的。我目前不知道下一步该做什么。
我也试着至少将img+表单居中,但我放弃了,因为它相对于移动设备屏幕大小不居中。(相反,它将div从屏幕上推下来,并创建水平滚动条,就好像它认为移动设备的屏幕非常宽一样。)
我该如何更改,以便移动设备用我指定的div填充屏幕?(或者至少,将fullsrceen-div类集中在移动设备的较小屏幕上。)非常感谢您的帮助!
当前html
<!DOCTYPE html>
<html>
<head>
<title>Reg</title>
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="Form.css" rel="stylesheet">
</head>
<body>
<div class="fullscreen" id="fullscreen">
<div style="position:relative">
<img src="fbg.png" alt="" />
<div style="position:absolute;left:0;top:0;">
<div id"=main">
<form method="post" action="SMA_Send2.php">
<label for="form">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit">
</label>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
当前css
#fullscreen {
height: 100vh;
width: 100vw;
position:fixed;
top:0;
left:0;
}
@media screen and (orientation:portrait) { height: 100vh;
width: 100vw; }
@media screen and (orientation:landscape) {height: 100vh;
width: 100vw; }
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
我认为如果您不尝试使用absolute&相对定位。如果你想让图像和表单居中,试试这个:
#fullscreen {
height: 100vh;
width: 100vw;
border: 1px solid black;
background-image:url(http://placehold.it/224x400);
background-repeat: no-repeat;
background-position: center top;
}
#formDiv {
margin: auto;
width: 224px;
padding-left: 12px;
}
label {
display: inline-block;
position: relative;
float: left;
text-align: left;
margin-right: 20px;
width: 190px;
padding: 5px;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
<div class="fullscreen" id="fullscreen">
<div id="formDiv">
<form method="post" action="SMA_Send2.php">
First Name: <input type="text" maxlength="20" name="Fname" required><br />
Last Name: <input type="text" maxlength="36" name="Lname" required><br />
Student ID: <input type="number" maxlength="4" name="Sid" required><br />
Email: <input type="email" maxlength="36" name="Email" required placeholder="Enter a valid email address"><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address: <input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F"><br />
<br />
<input type="submit" value="submit" name="submit" />
</form>
</div>
</div>
媒体查询需要包含规则,因为媒体查询中的代码无效,并且不以选择器为目标。
你瞄准移动设备的方式在媒体查询方面并不完美,因为你通常使用视口宽度:
@media (max-width: 600px) {
/*Some rule(s)*/
}
因此,与其针对移动设备,不如针对窄屏幕/视口。
也就是说,你需要在你的媒体查询中插入一个规则(或一些规则),让它做任何事情:
@media (max-width: 600px) {
#fullscreen {
/*Some declaration(s)*/
}
}
现在。。。也就是说,您的#fullscreen
规则已经使<div />
元素具有全宽/全高,请参见此处:http://jsfiddle.net/5jtuqry8/.所以我不太确定你到底想做什么。
您的代码有点乱,很难理解,什么是vh和vw?
无论如何,试试这个,我已经整理了一些代码,并删除了不必要的东西。我为移动屏幕添加了一个css,告诉它要使表单的所有输入为屏幕宽度的100%。
<div style="position:relative">
<img src="fbg.png" alt="" />
<div id="main">
<div id="myForm">
<form method="post" action="SMA_Send2.php">
First Name:<br />
<input type="text" maxlength="20" name="Fname" required>
<br />
Last Name:<br />
<input type="text" maxlength="36" name="Lname" required><br />
Student ID:<br />
<input type="number" maxlength="4" name="Sid" required><br />
Email:<br />
<input type="email" maxlength="36" name="Email" placeholder="Enter a valid email address" required><br />
Device Type:<br />
<select name="Dtype">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select><br />
Mac Address:<br />
<input type="text" maxlength="17" name="Mac" pattern="([0-9A-F]{2}[:-]){5}([0-9A-F]{2})" title="Use Format: 1A:B2:3C:D4:5E:6F" required placeholder="Ex: 1A:B2:3C:D4:5E:6F">
<br /><br />
<input type="submit" value="submit" name="submit">
</form>
</div></div></div>
CSS:
#myForm {
position:absolute;
left:0;
top:0
}
input, textarea {
padding: 9px;
margin: 5px 0;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 190px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
select {
padding: 9px;
margin: 5px 0;
border: solid 1px #E5E5E5;
outline: 0;
height: 36px;
width: 210px;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: -webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(4%, #EEE), to(#FFF));
background: -moz-linear-gradient(top, #FFF, #EEE 1px, #FFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
submit {
width: 210px;
padding: 9px 15px;
background: #617798;
border: 1;
font-size: 14px;
color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=submit] {
border: 1; /*rewriting standard style, it is necessary to be able to change the size*/
height: 35px;
width: 210px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
@media screen and (max-device-width: 480px){
input, select {width:100%}
}