即使在缩放时如何保持所有内容的大小和位置

Question

这个问题很晕。别介意。我不知道我应该怎么问这个问题。

Before Zooming After Zooming

这个效果怎么做出来的？

在我的 CODE 下面：-

<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Facebook</title>
</head>

<body>
  <div id="upper-part">
    <img src="https://cdn.worldvectorlogo.com/logos/facebook-1.svg" alt="Facebook Logo" width="250px" />
    <table>
      <tr>
        <td>Email or Phone</td>
        <td>Password</td>
        <td></td>
      </tr>
      <tr>
        <td><input type="text" /></td>
        <td><input type="password" /></td>
        <td><input type="submit" /></td>
      </tr>
      <tr>
        <td></td>
        <td>Forgotten Password?</td>
        <td></td>
      </tr>
    </table>
  </div>
  <h2>Facebook helps you connect and share with the people in your life.</h2>
  <img src="Images/Facebook-img2.png" alt="We are all connected!" />
  <h1>Create and Account</h1>
  <h2>It's free and always will be.</h2>
  <table>
    <tr>
      <td><input type="text" placeholder="First name" /></td>
      <td><input type="text" placeholder="Surname" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="text" placeholder="Mobile number or email address" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="password" placeholder="New Password" /></td>
    </tr>
  </table>
</body>

</html>

里面的DIV，也就是我想改成图片里的样子。我还在另一个不起作用的代码文件中添加了一些 CSS 。就像里面的表格一样 Table 在我放大时转移到下一行。

Answer 1

尺寸使用绝对单位（例如"px"）

.wrapper{
  display: flex;
  
  width: 200px; //!

}

.el1{
  background-color: #99a;
  width: 50%;
  height: 30px;
}

.el2{
  background-color: #a99;
  width: 50%;
  height: 30px;
}

<div class="wrapper">
  <div class="el1">
    Some Text
  </div>
  <div class="el2">
    Another Text
  </div>
</div>

即使在缩放时如何保持所有内容的大小和位置

How to stay everything at their size and Place even when zoom

html

css

zooming