Question

您好我已经使用HTML和CSS创建了一个登录页面，但这不适合各种设备，即;没有响应。如何使用媒体Queries使其响应.Plese建议任何解决方案。

 <html >
   <head>
    <meta charset="UTF-8">
   <title>Log-in</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
        <div class="login-card">
            <h1>Login</h1><br>
  <form>
      <input type="text" name="user" placeholder="Name">
      <input type="text" name="number" placeholder="Mobile Number">
      <input type="submit" name="register" class="login login-register" value="Register">    
 </form>

      </div>
      </div> 

 </body>
</html>

这是我的CSS

 body {
       background: url() no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      font-family: 'Roboto', sans-serif;
      }

.login-card {
     padding: 2px;
     width: 100%;
     background-color: #DCDCDC;
     margin: 0 auto 10px;
     border-radius: 1px 3px 2px;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     overflow: hidden;
            }

.login-card h1 {
     font-weight: 100;
     text-align: center;
     font-size: 2.3em;
     }

.login-card input[type=submit] {
     width: 100%;
     display: block;
     margin-bottom: 10px;
     position: relative;
      }

 .login-card input[type=text], input[type=name] {
     height: 44px;
     font-size: 16px;
     width: 100%;
     margin-bottom: 10px;
    -webkit-appearance: none;
     background: #fff;
     border: 1px solid #d9d9d9;
     border-top: 1px solid #c0c0c0;
    /* border-radius: 2px; */
     padding: 0 8px;
     box-sizing: border-box;
    -moz-box-sizing: border-box;
     border-radius:15px;
     }

  .login-card input[type=text]:hover, input[type=name]:hover {
     border: 1px solid #b9b9b9;
     border-top: 1px solid #a0a0a0;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     }

   .login {
     text-align:center;
     font-size: 14px;
     font-family: 'Arial', sans-serif;
     font-weight: 700;
     height: 36px;
     padding: 0 8px;
     /* border-radius: 3px; */
     /* -webkit-user-select: none;
     user-select: none; */
     }

    .login-register {
     /* border: 1px solid #3079ed; */
     border: 0px;
     border-radius:20px;
     color: #fff;
     text-shadow: 0 1px rgba(0,0,0,0.1); 
     background-color: #4d90fe;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,                  from(#4d90fe), to(#4787ed)); */
      }

 .login-register:hover {
     /* border: 1px solid #2f5bb7; */
     border: 0px;
     text-shadow: 0 1px rgba(0,0,0,0.3);
     background-color: #357ae8;
     /* background-image: -webkit-gradient(linear, 0 0, 0 100%,    from(#4d90fe), to(#357ae8)); */
     }

Answer 1

对移动浏览器使用meta标记

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

我建议您阅读media queries并根据您的布局自行决定将它们应用到CSS中的最佳方法。

Answer 3

我的建议是使用Bootstrap框架。

http://getbootstrap.com/

成千上万的站点使用Bootstrap为所有平台创建响应式设计。入门非常简单快捷。

如果您已开始使用媒体查询，可以在此处阅读。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

使用媒体查询的响应式网页

3 个答案: