如何在不同的设备上获得相同的结果?

时间:2018-02-21 12:12:45

标签: javascript html css

我使用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>

我想要代码。请帮忙。

5 个答案:

答案 0 :(得分:3)

您所指的是Responsive Web Design,即设计适合任何屏幕的页面。每个响应式设计概念的第一个 Dont's 是你不使用固定高度/宽度的元素,如

.email,.password{
   width: 300px;
}

当屏幕尺寸很小时,这将使您的输入元素溢出它的父容器。选择元素的百分比高度/宽度

.email,.password{
   width: 80%;
}

现在无论屏幕大小如何,电子邮件和密码输入框总是占据其容器宽度的80%。

这对于非常小的屏幕尺寸仍然不起作用。为此,你需要为那些非常小的屏幕写一些额外的CSS。这些被称为CSS Media Queries。考虑到你可能想要摆脱一些元素的非常小的尺寸,甚至调整一些元素的大小,减少一些元素的边距/填充,并将所有内容放在这个媒体查询块中。

@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文件的底部,当屏幕尺寸过小时,这些规则将开始运行,并使您的页面免于崩溃。

  

进一步阅读

这些都是我为了与响应式设计概念相处而解释的所有基础知识。要构建专业网站,您需要了解更多信息,并开始使用响应式设计框架。

  1. Responsive Web Design - Introduction。 (完成所有教程)
  2. Bootstrap 4 Tutorial(你不会后悔学习它)

答案 1 :(得分:1)

使用CSS媒体查询,根据屏幕尺寸设置不同的元素。例如:

&#13;
&#13;
@media screen and (max-width: 1000px) {
    body {
        background-color: blue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}

@media screen and (max-width: 400px) {
    body {
        background-color: green;
    }
}
&#13;
Resize this window and see the effects N.B go full screen to see effect
&#13;
&#13;
&#13;

有关媒体查询的更多信息here.

答案 2 :(得分:1)

我也遭受了这种困境,但至于我所能看到的,你已经走了一条伟大的道路。但是,您忽略的是所谓的响应式网页设计。我建议您查看CSS媒体查询,因为它们主要处理视图比率等。还可以查看 csstricks.com 等网站, codepen 上的笔甚至w3schools如果你无法应对其余的事情。

保持年轻,更多代码并继续努力!

答案 3 :(得分:0)

您可以将子元素的宽度值更改为百分比。 例如:

.email { ... width: 50%; ... }

这样你的宽度将对容器元素的宽度作出反应,而不是明确地描述为具体的像素数量。

此外,您应该在CSS中定义div尺寸(高度和宽度)。令人印象深刻的是,您了解可以在JS中定位元素属性,但是您违反了称为“关注点分离”的开发规则 在网络上,具体来说,这意味着: HTML是你的结构 CSS适合您的外观或风格 JS代表您的交互性或动态行为。

这种分离使您在构建应用时更容易在关注点之间切换。

答案 4 :(得分:0)

我复制了您的代码段然后更新,您可以将其用作新代码。这是非常基础的,如果你希望它在所有设备中都能为你工作,你必须首先明确它。

span
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: 5%;
border: 1px solid white;
background-color: white;
box-sizing: border-box;
}
body {
background-color:#D3D3D3;
}

.email {
display: inline-block;
padding-left:40px;
background-color:transparent;
height: 30px;
width: 100%;
font-size: 18pt;
background-image:url("https://i.stack.imgur.com/qXEoC.png");
background-repeat:no-repeat;
border:none;
border-bottom: 1px solid gray;
box-sizing: border-box;
}
.password {
display: inline-block;
padding-left:40px;
background-color:transparent;
height: 30px;
width: 100%;
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;
box-sizing: border-box;
}
.submit {
float:right;
background-color:#4285F4;
border:none;
color:white;
border-radius:3px;
font-weight: bold;
height: 35px;
width:100px;
}

.header {
  font-family:Arial; text-align:left
}

.form {
  position: relative;
}

.form-row {
  width: 100%;
  margin-bottom: 15px;
  text-align: left;
}