我使用 html、css、javascript 创建了一个表单页面。在我的电脑上看起来不错，但在手机上看起来很糟糕。元素脱离了白框（div），页面看起来一团糟。所以，我希望手机上显示的页面与电脑上显示的页面相同。你能帮忙吗？我只有13岁，所以我对html、js、css了解不多。但我知道其中最基本的部分。提前致谢。
这是我的代码：
var height = screen.height;
var width = screen.width;
var tm = height * (1/8);
document.body.style.marginTop = tm + "px"
var div = document.getElementById("div");
var height1 = height * (5/8);
div.style.height = height1 + "px";
var width1 = width * (5/16);
div.style.width = width1 + "px";
function f() {
var m = document.getElementById("checkbox");
if(m.checked)
{
var x = document.getElementById("password");
x.setAttribute("type","text");
}
else
{
var s = document.getElementById("password");
s.setAttribute("type","password");
}
}
.div {
padding: 50px;
border: 1px solid white;
background-color: white;
box-sizing: border-box;
}
body {
background-color:#D3D3D3;
}
.email {
background-color:transparent;
float:left; height: 30px;
width: 300px;
font-size: 18pt;
padding-left:40px;
background-image:url("https://i.stack.imgur.com/qXEoC.png");
background-repeat:no-repeat;
border:none;
border-bottom: 1px solid gray;
}
.password {
background-color:transparent;
float:left; height: 30px;
width: 300px;
font-size: 18pt;
padding-left:40px;
background-image:url("https://i.stack.imgur.com/pCUk4.png");
background-repeat:no-repeat;
border:none;
border-bottom: 1px solid gray;
}
.submit {
float:right;
background-color:#4285F4;
border:none;
color:white;
border-radius:3px;
font-weight: bold;
height: 35px;
width:100px;
}
<center>
<div class = "div" id = "div">
<img src="https://i.stack.imgur.com/JgTM1.gif" style="float:left;"><br><br><br>
<p style="font-size:25px; font-family:Arial; text-align:left">
Sign in
</p>
<p style="font-size:20px; font-family:Arial; text-align:left" >
with your Account
</p>
<form action="page.php" method="post">
<input type="email" id="email" placeholder="Email" name="email" class="email" autocomplete="off">
<br><br><br>
<input type="password" id="password" placeholder="Password" name="password" class="password" autocomplete="off">
<br><br><br>
<input type="checkbox" id="checkbox" onChange="f()" style="float:left"><div style="float:left">Show Password</div>
<br><br><br>
<button type="submit" id="submit" class="submit">NEXT</button>
</form>
</div>
</center>
我想要代码。请帮忙。
你所指的叫做响应式网页设计 https://www.w3schools.com/css/css_rwd_intro.asp即设计一个适合任何屏幕的页面。还有第一个Dont's每个响应式设计概念的一个特点是你不使用固定的高度/宽度的元素，如
.email,.password{
width: 300px;
}
当屏幕尺寸较小时，这将使您的输入元素溢出其父容器。选择元素的高度/宽度百分比
.email,.password{
width: 80%;
}
现在，无论屏幕尺寸如何，电子邮件和密码输入框将始终占据其容器宽度的 80%。
这对于非常小的屏幕尺寸仍然不起作用。为此，您需要为那些非常小的屏幕编写一些额外的 CSS。这些被称为CSS 媒体查询 https://www.w3schools.com/css/css3_mediaqueries_ex.asp。考虑到尺寸非常小，您可能想要删除某些元素，甚至调整某些元素的大小，减少某些元素的边距/填充，并将所有内容放入此媒体查询块中。
@media screen and (max-width: 360px) {
body {
margin-top: 4px !important
}
.div {
padding: 10px;
width: auto !important;
}
.email {
width: 80%;
font-size: 14pt;
}
.password {
width: 80%;
font-size: 14pt;
}
}
将此块放在 CSS 文件的底部，当屏幕尺寸太小时，这些规则将立即生效，避免页面崩溃。
进一步阅读
这些是我为了理解响应式设计概念而解释的所有基础知识。为了构建专业网站，您需要更多地了解它，并开始使用响应式设计框架。
-
响应式网页设计 - 简介 https://www.w3schools.com/css/css_rwd_intro.asp。 （完成所有教程）
-
Bootstrap 4 教程 https://www.w3schools.com/bootstrap4/default.asp（学了你不会后悔的）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
