Question

我有一个登录页面。它没有太多文字，并且在大屏幕上可读，例如笔记本电脑或平板电脑。然而，在移动设备中，必须缩放它直到他看到那里写的是什么。我想让它可扩展，但看起来我不知道该怎么做。这是HTML。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Login</title>
  <style>
  .big {
    width:100%;
    text-align:center;
    }
  </style>
</head>
<body>
   <form name="form1" action="enter.php" method="post">
    <table class="big">
      <tr>
        <td colspan="2">
         <img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
        </td>
       </tr>
        <td align="right">Name:</td>
        <td align="left"><input id="Username" name="Username" size="25" type="text"></td>
      </tr>
      <tr>
        <td align="right">Pass:</td>
        <td align="left"><input id="Password" name="Password" size="25" type="password"></td>
      </tr>
      <tr>
        <td><input type="submit" value="Sumbit"></td>
        <td></td>
      </tr>
    </table>
   </form>
</body>
</html>

Answer 1

您需要进行自适应和响应式设计。您可以使用这些库来帮助您创建响应式网格，例如：

http://getskeleton.com/

他们使用＆＃34;媒体查询＆＃34;对于响应式设计，请保留一个链接：

https://developer.mozilla.org/es/docs/CSS/Media_queries

祝你好运：）

Answer 2

尝试在<head>...</head>标记

之间添加以下行

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

Answer 3

只是为了让您了解所涉及的元素... 在fuul屏幕中展开snipet，而不是调整浏览器页面的大小。

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Login</title>
      <style>
      .big {
        width:100%;
        text-align:center;
        }
@media only screen and (max-width: 600px) {
   body {
   font-size:1.6em;
        }

 input{
         width: 90%;
         font-size: 1.4em;
          }
input[type="submit"] {
          width: 50%;
                      }
}
      </style>
    </head>
    <body>
       <form name="form1" action="enter.php" method="post">
        <table class="big">
          <tr>
            <td colspan="2">
             <img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
            </td>
           </tr>
            <td align="right">Name:</td>
            <td align="left"><input id="Username" name="Username" size="25" type="text"></td>
            <td></td>
          </tr>
          <tr>
            <td align="right">Pass:</td>
            <td align="left"><input id="Password" name="Password" size="25" type="password"></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:left"><input type="submit" value="Sumbit"></td>
            <td></td>
          </tr>
        </table>
       </form>
    </body>
    </html>

如何使这个HTML表单可扩展？

3 个答案: