如何重构此页面，使其能够响应 ipad 尺寸

Question

我有一个登陆页面需要修复，而且我对 CSS 很生疏。目前我有一个布局，有很多固定宽度和绝对定位，我知道在尝试创建响应式布局时这是有问题的。我需要相同的布局，但要响应灵敏并根据 ipad 尺寸进行相应更改，因为它当前是静态的。

我知道我需要使用 % 来表示高度和宽度，而不是这些固定值，但是我是否还需要使用像 rems 这样的相对单位？这是页面应该看起来的样子，并且始终保持响应。

这是我当前的页面标记和 CSS。

索引

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="globals.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="landing-page">
      <div class="div">
        <div class="overlap">
          <div class="ava-logo">
            <div class="overlap-group">
              <div class="frame"><img class="logo" src="img/logo-64.png" /></div>
            </div>
          </div>
          <img class="helo-ava-label" src="img/heloavalabel.svg" />
          <div class="text-wrapper">Text here</div>
        </div>
        <div class="register-button-wrapper">
          <div class="register-button"><div class="text-wrapper-2">Button</div></div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS


.landing-page {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.landing-page .div {
  background-color: #ffffff;
  width: 1440px;
  height: 1024px;
  position: relative;
}

.landing-page .overlap {
  position: absolute;
  width: 544px;
  height: 1031px;
  top: -7px;
  left: 896px;
  background: linear-gradient(180deg, rgb(26, 179, 116) 0%, rgb(0, 122, 195) 100%);
}

.landing-page .ava-logo {
  position: absolute;
  width: 326px;
  height: 339px;
  top: 283px;
  left: 97px;
  border-radius: 162.95px/169.7px;
  background: linear-gradient(180deg, rgb(26, 179, 116) 0%, rgb(0, 122, 195) 93.75%);
}

.landing-page .overlap-group {
  position: relative;
  width: 214px;
  height: 210px;
  top: 71px;
  left: 56px;
  background-image: url(./img/union.svg);
  background-size: 100% 100%;
}

.landing-page .frame {
  position: relative;
  width: 84px;
  height: 84px;
  top: 56px;
  left: 65px;
}

.landing-page .logo {
  position: absolute;
  width: 84px;
  height: 82px;
  top: 1px;
  left: 0;
}

.landing-page .helo-ava-label {
  position: absolute;
  width: 365px;
  height: 120px;
  top: 787px;
  left: 92px;
}

.landing-page .text-wrapper {
  position: absolute;
  width: 255px;
  top: 138px;
  left: 138px;
  font-family: "Inter", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.landing-page .register-button-wrapper {
  position: absolute;
  width: 896px;
  height: 1024px;
  top: 0;
  left: 0;
  background-image: url(./img/rectangle-64.png);
  background-size: 100% 100%;
}

.landing-page .register-button {
  display: flex;
  width: 431px;
  height: 74px;
  align-items: center;
  justify-content: center;
  padding: 10px 51px;
  position: relative;
  top: 862px;
  left: 220px;
  background-color: #027dbe;
  border-radius: 27px;
}

.landing-page .text-wrapper-2 {
  position: relative;
  width: 300px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* For iPad portrait mode */
@media (max-width: 768px) {}

Answer 1

为了使用 css 创建响应式设计，您需要使用 css @media 规则。

@Media查询可用于检查很多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向

等等...

例如：

如果您想将 css 规则应用于宽度小于 600px 的屏幕，您可以使用：

    @media only screen and (max-width: 600px) {
        body {background-color: lightblue;}
    }

对于 600 像素及以上的屏幕：

@media only screen and (min-width: 600px) {
            body {background-color: lightblue;}
        }

查看此 W3 指南

如何重构此页面，使其能够响应 ipad 尺寸

问题描述投票：0回答：1

1个回答

最新问题

如何重构此页面，使其能够响应 ipad 尺寸

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1