Question

我的图像是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;
}

Answer 1

我认为如果你不想用绝对的＆amp;相对定位。如果您希望图像和表格居中，请尝试：

#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>

Answer 2

媒体查询需要包含规则，因为您拥有规则，媒体查询中的代码无效，并且不会使用选择器定位任何内容。

您定位移动设备的方式绝不是完美的媒体查询，因为您通常使用视口宽度来执行此操作：

@media (max-width: 600px) {
    /*Some rule(s)*/
}

因此，我们不是针对移动设备，而是针对狭窄的屏幕/视口。

也就是说，您需要在媒体查询中插入规则（或一些规则）才能执行任何操作：

@media (max-width: 600px) {
    #fullscreen {
        /*Some declaration(s)*/
    }
}

现在......那就是说，#fullscreen的规则已经使<div />元素的宽度/高度变为全宽，请参见此处：http://jsfiddle.net/5jtuqry8/。所以我不太确定你要做的是什么。

Answer 3

你的代码有点乱，很难理解，是什么 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%}
    }

强制div占用移动设备上的整个屏幕？ CSS，HTML

3 个答案: