Question

我创建了一个登录页面，但它没有响应，为了达到这个目的，我搞砸了整个设计。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .box
        {
            position: center; 
            top: 17;
            left: 17;
        }
        .logo
        {
            position: absolute;
            top:50px;
            left: 100px;
            border-right: 2px solid gray;
        }
</style>
</head>
<body> <div class="container">
  <h2>ADMIN PANEL LOGIN</h2>
  <form>
    <div>
      <div class="form-group box">

      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    <button type="submit" class="btn btn-default">Submit</button>
     <img src="back_box.png"  class="box" width="900" height=" 400"  />
        <img src="logo_written.png"  class="logo" width="250" height="300" />
     </div>
  </form>
</body>
</html>

我也添加了bootstrap类，但我无法实现响应式设计的目标

Answer 1

对于Bootstrap，您需要添加bootstrap文件源，只需将其添加到您的头部。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

只需添加一个bootstrap.css的链接cdn ..

＆＃13;

cordova-fetch for cordova-ios@~4.5.4

＆＃13;

Answer 3

将此元标记添加到头标记

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

之后，您就可以为移动设备等多种设备编写媒体查询。 tablates ...

@media (max-width: 767px) {
  /* write css for mobile here */
}


@media (min-width: 768px) and (max-width: 1024px) {
  /* write css for tablate here */
}

使用CSS的响应式网页

3 个答案: