css 响应式HTML设计-调整整个页面内容的大小

4bbkushb 于 2023-07-01 发布在其他

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

我想知道我们能做些什么来使页面的大小保持在它的每一个比例？
我自己来解释一下：让我们假设我有一个红色的正方形占据了整个页面，一个绿色的正方形位于页面的中心（想象它的尺寸是整个页面的一半）
当我调整我的页面，我想仍然有一个完整的红色方块和一个居中的绿色方块的一半（如果这是不清楚，告诉我，我会尽量解释得更好）
有没有人有一个想法，请？
我已经尝试过宽高比，但它没有工作

css

来源：https://stackoverflow.com/questions/76574696/responsive-html-design-resizing-the-whole-content-of-the-page

1条答案

按热度按时间

n9vozmp41#

body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #container {
      height: 100%;
    }

    #red-square {
      background-color: red;
      width: 100%;
      aspect-ratio: 1/1; 
    }

    #green-square {
      background-color: green;
      width: 50%;
      max-width: 50vh; 
      aspect-ratio: 1/1; 
    }

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="container">
    <div id="red-square"></div>
    <div id="green-square"></div>
  </div>
</body>
</html>

尝试以下代码，如果您希望green square为红色，则将display：flex添加到container id

赞(0）回复(0）举报 2023-07-01

我来回答

css 响应式HTML设计-调整整个页面内容的大小

1条答案

相关问题

热门标签

最新问答