Javascript 如何在不同的设备中获得相同的结果？

我使用html、css和javascript创建了一个表单页面。它在我的电脑里看起来不错，但在手机里看起来很糟糕。元素从白框（div）中取出，页面看起来像一团乱。所以，我希望手机上显示的页面应该和电脑上显示的页面一样。你能帮忙吗？我只有13岁，所以我对html、js、css了解不多。但我知道其中最基本的部分。提前谢谢

这是我的密码：

var height=screen.height；
变量宽度=屏幕宽度；
var tm=高度*（1/8）；
document.body.style.marginTop=tm+“px”
var div=document.getElementById（“div”）；
变压高度1=高度*（5/8）；
div.style.height=高度1+“px”；
变量宽度1=宽度*（5/16）；
div.style.width=width1+“px”；
函数f（）{
var m=document.getElementById（“复选框”）；
如果（m.checked）
{
var x=document.getElementById（“密码”）；
x、 setAttribute（“类型”、“文本”）；
} 
其他的
{ 
var s=document.getElementById（“密码”）；
s、 setAttribute（“类型”、“密码”）；
}
}

.div{
填充：50px；
边框：1px纯白；
背景色：白色；
框大小：边框框；
}
身体{
背景色：#D3；
}
.电邮{
背景色：透明；
浮动：左侧；高度：30px；
宽度：300px；
字号：18pt；
左侧填充：40px；
背景图像：url（“https://i.stack.imgur.com/qXEoC.png");
背景重复：无重复；
边界：无；
边框底部：1px纯色灰色；
}
.密码{
背景色：透明；
浮动：左侧；高度：30px；
宽度：300px；
字号：18pt；
左侧填充：40px；
背景图像：url（“https://i.stack.imgur.com/pCUk4.png");
背景重复：无重复；
边界：无；
边框底部：1px纯色灰色；
}
.提交{
浮动：对；
背景色：#4285F4；
边界：无；
颜色：白色；
边界半径：3px；
字体大小：粗体；
高度：35px；
宽度：100px；
}

登录


用你的帐户









显示密码




下一个

使用

CSS

媒体查询根据屏幕大小对元素进行不同的样式设置。例如：

@媒体屏幕和（最大宽度：1000px）{
身体{
背景颜色：蓝色；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
身体{
背景颜色：紫色；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
身体{
背景颜色：绿色；
}
}

---

调整此窗口的大小并查看效果N.B进入全屏查看效果

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

。电子邮件{
...
宽度：50%；
...
}

这样，您的宽度将对容器元素的宽度作出反应，而不是显式地描述为具体的像素量

此外，您应该在CSS中定义

div

维度（高度和宽度）。令人印象深刻的是，您知道可以将JS中的元素属性作为目标，但您违反了称为“关注点分离”的开发规则 具体而言，在网络上，这意味着基本上： HTML是您的结构 CSS是为你的外观或风格 JS用于您的交互或动态行为

---

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

您所指的是所谓的，即设计一个适合任何屏幕的页面。每个响应性设计概念的第一个不要是，您不需要为以下元素使用固定的高度/宽度

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

当屏幕较小时，这将使输入元素溢出其父容器。选择元素的高度/宽度百分比

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

现在，无论屏幕大小如何，电子邮件和密码输入框将始终占据其容器宽度的80%

对于真正的小屏幕尺寸，这仍然不起作用。为此，您需要为那些非常小的屏幕编写一些额外的CSS。这些被称为。考虑到非常小的尺寸，您可能希望删除某些元素，甚至调整某些元素的大小，减少某些元素的边距/填充，并将所有内容放入此媒体查询块中

@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文件的底部，当屏幕尺寸太小时，这些规则将生效，从而避免页面崩溃

进一步阅读

这些都是我解释的基础，只是为了配合响应性设计概念。对于构建专业网站，您需要了解更多信息，并开始使用响应性设计框架

。（完成所有教程）

（你不会后悔的）

---

我也经历过这样的困境，但就我所见，你已经走上了一条伟大的道路。然而，您缺少的一点是所谓的响应式Web设计。我强烈建议你签出CSS媒体查询，因为它们主要处理浏览率等问题。也可以签出诸如pens on之类的网站，即使你无法处理其余的问题

---

保持年轻，编写更多代码并继续努力

我复制了您的代码片段并进行了更新，您可以将其用作新代码。这是非常基本的，如果你想让它在所有的设备上都适用，你必须先弄清楚

var height=screen.height；
变量宽度=屏幕宽度；
var tm=高度*（1/8）；
document.body.style.marginTop=tm+“px”
var div=document.getElementById（“div”）；
变压高度1=高度*（5/8）；
div.style.height=高度1+“px”；
变量宽度1=宽度*（5/16）；
div.style.width=width1+“px”；
函数f（）{
var m=document.getElementById（“复选框”）；
如果（m.checked）
{
var x=document.getElementById（“密码”）；
x、 setAttribute（“类型”、“文本”）；
} 
其他的
{ 
var s=document.getElementById（“密码”）；
s、 setAttribute（“类型”、“密码”）；
}
}

.div{
填充：5%；
边框：1px纯白；
背景色