0
如何在html和css中進行定位，以便在所有設備中都可以使用？
.first_bar
{
\t background-color:rgb(59, 89, 152);
\t height:80px;
\t width:100%;
\t margin-top:-39px;
\t margin-left:-5px;
\t
\t
}
.name
{
\t font-size:40px;
\t font-weight:bold;
\t font-style:cursive;
\t color:white;
\t margin-left:190px;
\t padding-top:20px;
\t
}
.gyan
{
\t color: rgb(59, 89, 152);
font-size: 20px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width: 450px;
word-spacing: -1px;
\t margin-left:200px;
}
.img
{
\t margin-left:200px;
\t width: 450px;
\t
\t
}
.information
{
\t position:relative;
\t float:right;
\t right:240px;
\t bottom:280px;
\t
}
.box
\t {
\t border:1px solid black;
\t width:120px;
\t height:20px;
\t background-color:white;
\t position:relative;
\t float:right;
\t left:790px;
\t bottom:100px;
\t }
.boxhead
\t {
\t border:1px solid rgb(59, 89, 152);
\t width:120px;
\t height:20px;
\t
\t position:relative;
\t float:right;
\t left:790px;
\t bottom:100px;
\t color:white;
\t word-spacing:-2px;
\t font-style:helvetica;
\t font-weight:-1px;
\t
\t }
.boxlogin
\t {
\t border:1px solid black;
\t width:60px;
\t height:20px;
\t background-color:rgb(139,157,195);
\t position:relative;
\t float:right;
\t left:800px;
\t bottom:125px;
\t color:white;
\t font-style:helvetica;
\t }
.boxheadniche
\t {
\t \t
\t border:1px solid rgb(59, 89, 152);
\t width:120px;
\t height:13px;
\t background-color:rgb(59, 89, 152);
\t position:relative;
\t float:right;
\t left:790px;
\t bottom:125px;
\t color:white;
\t word-spacing:-2px;
\t font-style:helvetica;
\t font-size:15px;
\t \t
\t }
\t .informationextra
\t {
\t position:relative;
\t float:right;
\t right:-110px;
\t bottom:150px;
\t list-style-type:none;
\t font-size:20px;
\t }
\t .adddata
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:25px;
\t \t width:170px;
\t \t background-color:white;
\t \t font-style:Arial;
\t \t color:#c0c0c0;
\t \t padding:5px;
\t \t border-radius:5px;
\t \t word-spacing:-1px;
\t \t font-size:15px;
\t \t
\t }
\t .adddataextra
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:25px;
\t \t width:340px;
\t \t background-color:white;
\t \t font-style:Arial;
\t \t color:#c0c0c0;
\t \t padding:5px;
\t \t border-radius:5px;
\t \t word-spacing:-1px;
\t \t font-size:15px;
\t \t margin-top:10px;
\t }
\t .surname
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:25px;
\t \t width:145px;
\t \t background-color:white;
\t \t font-style:Arial;
\t \t font-size:15px;
\t \t color:#c0c0c0;
\t \t padding:5px;
\t \t border-radius:5px;
\t \t word-spacing:-1px;
\t \t position:relative;
\t \t float:right;
\t \t left:505px;
\t \t bottom:130px;
\t }
\t .informationbirthday
\t {
\t \t position:relative;
\t \t float:right;
\t \t top:50px;
\t \t left:500px;
\t \t font-style:helvetica;
\t \t
\t \t
\t \t
\t }
\t .birthday
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:20px;
\t \t width:60px;
\t \t font-style:helvetica;
\t }
\t .birthdaymonth
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:20px;
\t \t width:70px;
\t \t font-style:helvetica;
\t }
\t .birthdayyear
\t {
\t \t border:1px solid rgb(189, 199, 216);
\t \t height:20px;
\t \t width:55px;
\t \t font-style:helvetica;
\t }
\t .reason
\t {
\t \t position:relative;
\t \t height:20px;
\t \t width:150px;
\t \t font-style:helvetica;
\t \t font-size:12px;
\t \t color:rgb(59, 89, 152);
\t \t top:-23px;
\t \t top:-23px;
\t \t left:200px;
\t }
\t .gender
\t {
\t \t position:relative;
\t \t left:790px;
\t \t bottom:50px;
\t \t clear:both;
\t }
\t .caution
\t {
\t \t font-size:15px;
\t \t font-style:Arial;
\t \t color:grey;
\t \t width:500px;
\t \t height:10px;
\t \t
\t }
\t .button
\t {
\t \t height:30px;
\t \t width:220px;
\t \t background-color:#69a74e;
\t \t position:relative;
\t \t float:right;
\t \t color:white;
\t \t right:300px;
\t \t border:1px solid rgb(59, 89, 152);
\t \t border-radius:5px;
\t \t font-size:20px;
\t \t padding:7px;
\t \t font-weight:bold;
\t \t word-spacing:2px;
\t \t
\t }
\t .line
\t {
\t \t position:relative;
\t \t left:800px;
\t \t top:50px;
\t \t color:grey;
\t \t font-size:15px;
\t }
\t .link
\t {
\t \t text-decoration:none;
\t \t color:#0e385f;
\t }
\t .link:hover,.boxheadniche:hover,.reason:hover
\t {
\t \t text-decoration:underline; \t }<!DOCTYPE html>
<html>
<head>
<title>Facebook-Log In or Sign up</title>
<link rel="stylesheet" type="text/css" href="facebook.css">
<link rel="icon" href="https://www.facebookbrand.com/img/fb-art.jpg">
</head>
<body>
<div class="first_bar">
<a href="https://www.facebook.com/" style="text-decoration:none"><p class="name">facebook</p></a>
<table>
<thead>
<tr>
<th class="boxhead";>Email or phone</th>
<th></th>
<th class="boxhead">Password</th>
</tr>
</thead>
<tbody>
<tr>
<td class="box"></td>
<td></td>
<td class="box"></td>
</tr>
<tr>
<td></td><td></td><td></td>
<td><form><input class="boxlogin" type="submit" value="Log In" ></form></td>
</tr>
<tr>
<td></td><td></td>
<td class="boxheadniche"><a href="https://www.facebook.com/recover/initiate?lwv=110" style="color:white;text-decoration:none;"> Having Trouble?</a></td>
</tr>
</tbody>
</table>
</div>
<div >
<p class="gyan">Facebook helps you connect and share with the people in your life.</p>
<img class="img" src="https://www.facebook.com/rsrc.php/v2/yx/r/pyNVUg5EM0j.png"/>
</div>
<div class="information">
<h1 style="font-size:40px">Create an account</h1>
<p style="font-size:20px;word-spacing:-1px;"><strong>It's free and will always be.</strong></p>
</div>
<div>
<form>
<ul class="informationextra">
<li ><input class="adddata" type="text" name="first" value="First Name"></li>
<li><input class="adddataextra" type="text" name="first" value="Enter Mobile Number or email address"></li>
<li><input class="adddataextra" type="text" name="reenter" value="Re-enter Mobile number or email address"></li>
<li><input class="adddataextra" type="text" name="reenter" value="New Password"></li>
</ul>
</form>
</div>
<form>
<div>
<input class="surname" type="text" name="surname" value="Surname">
</div>
</form>
<div class="informationbirthday">
<h2>Birthday</h2>
<select class="birthday">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option>
<option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option>
<option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select>
\t <select class="birthdaymonth">
<option>Month</option>
<option>1</option>
<option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option>
<option>12</option>
</select>
<select class="birthdayyear">
<option>year</option><option>2016</option><option>2015</option><option>2014</option><option>2013</option><option>2012</option><option>2011</option><option>2010</option>
<option>2009</option><option>2008</option><option>2007</option><option>2006</option><option>2005</option><option>2004</option><option>2003</option><option>2002</option>
<option>2001</option><option>2000</option><option>1999</option><option>1998</option><option>1997</option><option>1996</option><option>1995</option><option>1994</option>
<option>1993</option><option>1992</option><option>1991</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option>
<option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option>
</select>
\t <div class="reason"><a href="https://www.facebook.com/#" style="text-decoration:none;color:#3b5998;">Why do I need to provide my date of birth?</a>
\t </div>
</div>
<div class="gender">
<form>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
</form>
<p class="caution">By clicking Create an account, you agree to our <a class="link" href="https://www.facebook.com/legal/terms" >Terms</a>
and that you have read our <a class="link" href="https://www.facebook.com/about/privacy">Data Policy</a>,
including our <a class="link" href="https://www.facebook.com/help/cookies" >Cookie Use.</a></p>
</div>
<div class="button">
Create an Account
</div>
<div class="line">
<p>____________________________________________</p>
<p><a class="link" href="https://www.facebook.com/pages/create/?ref_type=registration_form" style="">Create a page</a> for a fan,celebrity or business.</p>
</div>
</body>
</html>我用px設置尺寸和其他的東西。由於我無法創建任何內容，因此定位元素時遇到問題。我的頁面對大小不同的設備無響應。我只能使用HTML和CSS提交任務。我根據屏幕的尺寸創建了它。但是在其他設備中卻是一團糟。我該怎麼辦？
使用EM代替PX –
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp還嘗試使用更多的％ – Frutis
分享你的研究可以幫助大家。告訴我們你試過的東西以及爲什麼 它不符合你的需求。這表明你已經花時間 試圖幫助自己，它使我們避免重申明顯的答案， ，最重要的是它可以幫助您獲得更具體和相關的答案！ 另請參閱[如何問]（http://stackoverflow.com/questions/how-to-ask） – Frits