使用多个元素创建响应式页面- CSS/HTML

dkqlctbz 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(116)

我是新的使用HTML和CSS设计网站，我想创建一个页面设计如下所示：

如上图所示，页面需要有一个带有徽标的标题，然后是两个彼此略微重叠的框。然而，一旦我尝试了这样的设计，虽然它在一个屏幕上看起来不错，但我在尝试调整屏幕大小时遇到了一些问题，例如方块没有移动/调整大小到新屏幕上的正确位置。
下面是我已经尝试过的代码：

.header {
  position: absolute;
  width: 100%;
  min-height: 18rem;
  left: 0;
  top: 0;
  background: #F1E579;
}

.logo {
  font-size: 350%;
  font-family: Above;
  margin-left: 3rem;
  margin-top: 2.75rem;
}

.box1 {
  position: absolute;
  width: 37rem;
  min-height: 40rem;
  left: 7.8rem;
  top: 12.3rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.box2 {
  position: absolute;
  width: 42rem;
  min-height: 45rem;
  left: 44rem;
  top: 10rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

css

来源：https://stackoverflow.com/questions/76110264/creating-a-responsive-page-with-multiple-elements-css-html

1条答案

按热度按时间

z4iuyo4d1#

问题出在您使用的测量单位上。我已经将适当点的测量单位从rem更改为vw（视口宽度）。
1 vw =视口宽度的1%。
这可能适合您，也可能不适合您，但它实现了调整框大小的要求（仅限宽度，我不考虑框高度）。
然而，这只是一个猜测，我不知道你想在移动的屏幕上实现什么（手机在纵向视图大多数）。这肯定需要不同的风格。

.header {
  position: absolute;
  width: 100%;
  min-height: 18rem;
  left: 0;
  top: 0;
  background: #F1E579;
}

.logo {
  font-size: 350%;
  font-family: Above;
  margin-left: 3rem;
  margin-top: 2.75rem;
}

.box1 {
  position: absolute;
  width: 37vw;
  min-height: 40rem;
  left: 7.8rem;
  top: 12.3rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.box2 {
  position: absolute;
  width: 42vw;
  min-height: 45rem;
  left: 44vw;
  top: 10rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

@media (min-width: 1500px) {
  .box1 {
    width: 38vw;
  }
}

<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

使用多个元素创建响应式页面- CSS/HTML

1条答案

相关问题

热门标签

最新问答