如何在不同的设备上获得相同的结果？ [英] How to get same results in different devices?

查看：127 发布时间：2018/6/24 19:15:12 javascript html css

本文介绍了如何在不同的设备上获得相同的结果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用html，css，javascript创建了一个表单页面。它在我的电脑中看起来不错，但在手机中看起来非常糟糕。元素离开白框（div），页面看起来像一团糟。所以，我希望在手机中显示同一页面，因为它显示在计算机中。你能帮忙吗？我只有13岁，所以我没有多少介绍html，js，css。但我知道它们中最基本的部分。

以下是我的代码：

$ b

我想要代码。请帮助。 您所指的是响应式网页设计即设计一个适合任何屏幕的页面。每一个响应式设计概念的第一个 Dont's 是你不使用固定的高度/宽度来表示元素，比如

  .email，.password {
 width：300px; 
 
 
 
 $ b 当屏幕尺寸很小时，这会使你的输入元素溢出它的父容器。为元素选择百分比高度/宽度
  .email，.password {
 width：80％; 
 
 $ / code> 
现在电子邮件和密码输入框始终占用其容器宽度的80％不管屏幕尺寸是多少。
 
 
 这对于非常小的屏幕尺寸并不适用。为此，您需要为这些真正的小屏幕编写一些额外的CSS。这些被称为 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文件的底部，这些规则将在屏幕尺寸太小并将您的网页从分解中保存时启动。
 
  进一步阅读 
 
 
这些都是我为解释响应式设计概念而解释的所有基本知识。对于构建专业网站，您需要了解更多信息，并开始使用响应式设计框架。 
 $ b 
 
  响应式网页设计 - 介绍。 （完成所有教程）
 
   Bootstrap 4教程
 a>（您不会后悔学习它） 
 
 
I had created a form page using html, css, javascript. It looks good in my computer but it looks very bad in a mobile phone. The elements get out of the white box(div) and the page looks like a mess. So, I want that the same page should be displayed in a mobile phone as it is displayed in a computer. Can you please help? I am only 13-years old and so I am not introduced much to html, js, css. But I know the very basic part of them. Thanks in advance.


Here is my code:



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>





I want code. Please help.
 解决方案 What you are referring is called Responsive Web Design i.e design a page that fits to any and every screen. And the first Dont's of every responsive design concept is you don't use fixed height/width for elements like
.email,.password{
   width: 300px;
}
This will make your input elements overflow it's parent container when screen size is small. Choose Percentage height/width for your elements
.email,.password{
   width: 80%;
}
Now email and password input box will always take up 80% width of it's container no matter what the screen size is.

This will not still work for really small screen sizes. For that you need to write some extra CSS for those really small screens. These are called CSS Media Queries. Considering the very small size you might want to get rid of some elements, or even resize some elements, reduce the margins/paddings for some elements and put everything inside this Media Query block.
@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;
  }
}
Put this block at the bottom of your CSS file, and these rules will kick into action when the screen size is too small and save your page from breaking down.

  Further Reading
These are all the basics I explained just to get along with responsive design concepts. For building Professional Websites you need to learn a bit more about it, and get started with responsive design frameworks.

Responsive Web Design - Introduction. (complete all the tutorials)
Bootstrap 4 Tutorial (you will not regret learning it)


                        
这篇关于如何在不同的设备上获得相同的结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在不同的设备上获得相同的结果？ [英] How to get same results in different devices?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在不同的设备上获得相同的结果？ [英] How to get same results in different devices?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭