Question

即时创建着陆页，基本上我将图片用作背景图片，并创建位置绝对的输入，以便浮动在图像上方。

因为所有的CSS属性都是百分比，当我将手机从纵向旋转到横向时，一切都是毛刺......

HTML：

<html>
<head>
<title></title>
<script src="landing.js";></script>
<link rel="stylesheet" href="landing.css">
</head>
<body>

<form id='myform' name="form1"  action=''>

 <input type="email"  id="email" name="email"  onfocus="FocusClear('E-Mail', this)" onblur="BlurNoClear('E-Mail', this)" value="E-Mail">


<input type="text"  id="name" name="name"  onfocus="FocusClear('Name', this)" onblur="BlurNoClear('Name', this)" value="Name">    

    <button id="join_beta" onclick="sendForm();"> </button>
    </form>
</body>
</html>

CSS：

body
{
background-image:url('landing_new.jpg') !important;
background-repeat:no-repeat;
background-size: 75% auto;
    background-position:  center top;
background-color:#38a3db;
}

#email{
  border: 0px;
  margin-top: 24.8%;
  margin-left: 60.5%;
  width: 19.5%;
  height: 6.5%;
  background-color: transparent;
  position: absolute;
    text-align: center;
  font-size: 100%;
}

#name{
  border: 0px;
margin-top: 24.8%;
  margin-left: 39.6%;
  width: 19.5%;
  height: 6.5%;
  background-color: transparent;
  position: absolute;
    text-align: center;
  font-size: 100%;
    padding: 0px;
}

#join_beta{
  border: 0px;
  margin-top: 29.2%;
  margin-left: 39.7%;
  width: 40%;
  height: 8%;
  background-color: transparent;
  position: absolute;
    cursor: pointer;
    padding: 0px;
}

@media only screen and (max-device-width: 480px) {
body
{
background-image:url('landing_new.jpg') !important;
background-repeat:no-repeat;
background-size: 100% auto;
    background-position:  center top;
background-color:#38a3db;
}

#email{
  border: 0px;
  margin-top: 32%;
  margin-left: 62%;
  width: 26%;
  height: 2.5%;
  background-color: transparent;
  position: absolute;
    font-size: 8pt;
    text-align: center;
}

#name{
  border: 0px;
  margin-top: 32%;
  margin-left: 34.5%;
  width: 26%;
  height: 2.5%;
  background-color: transparent;
  position: absolute;
    text-align: center;
  font-size: 8pt;
    padding: 0px;
}

#join_beta{
  border: 0px;
  margin-top: 37.5%;
  margin-left: 34.5%;
  width: 54%;
  height: 2.5%;
  background-color: transparent;
  position: absolute;
    cursor: pointer;
    padding: 0px;
} 
}


@media only screen and (max-device-width: 480px){
body
{
background-image:url('landing_new.jpg') !important;
background-repeat:no-repeat;
background-size: 100% auto;
    background-position:  center top;
background-color:#38a3db;
}

#email{
  border: 0px;
  margin-top: 32%;
  margin-left: 62%;
  width: 26%;
  height: 2.5%;
  background-color: transparent;
  position: absolute;
    font-size: 6pt;
    text-align: center;
}


#name{
  border: 0px;
  margin-top: 32%;
  margin-left: 34.5%;
  width: 26%;
  height: 2.5%;
  background-color: transparent;


position: absolute;
    text-align: center;
  font-size: 6pt;
    padding: 0px;
}

#join_beta{
  border: 0px;
  margin-top: 37.5%;
  margin-left: 34.5%;
  width: 54%;
  height: 2.5%;
  background-color: transparent;
  position: absolute;
    cursor: pointer;
    padding: 0px;
} 
}

任何想法？

Answer 1

编辑：请注意，如果你想使用任何Bootstrap的本机JS（有很多很酷的东西可以使用！）你必须包含bootstrap.js和jquery，否则他们赢了＃ 39;工作。

您可以找到更多信息。关于bootstrap：http://getbootstrap.com

您正在寻找的是响应式支持，并且您正在尝试手动执行此操作。我们都很钦佩自己做一些很酷的事情所需的勇气，但对于像这样简单的事情，通常最好采用响应式框架。我自己喜欢bootstrap，我在大约5分钟内编码。据说这是非常简单的，但如果你使用你的CSS并添加你的BG图像和定位，它将做你想要它做的很好没有故障。

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
         <div class="container">
         <div class="row">
               <div class="col-xs-12">
                     <form id='myform' name="form1"  action=''>
                          <div class="form-group">
                              <input type="email"  id="email" name="email"  onfocus="FocusClear('E-Mail', this)" onblur="BlurNoClear('E-Mail', this)" value="E-Mail"> 
                              <input type="text"  id="name" name="name"  onfocus="FocusClear('Name', this)" onblur="BlurNoClear('Name', this)" value="Name">
                              <button id="join_beta" onclick="sendForm();" class="btn btn-default">Submit</button>
                         </div>
                    </form>
               </div>
         </div>
      </div>
   </body>

</html>

移动登陆页面 - 景观问题

1 个答案: