html - div 的 CSS 比例变换(缩放)，包括适合宽度的文本、图像

Question

对于营销横幅等，最好保持页面(或页面的一部分)的精确外观。这意味着所有边距、文本大小、图像大小等。最简单的方法是对每个元素使用绝对 XY 定位，然后缩放整个聚合 block (父元素)以适应设备的宽度。

基本原理:像 flexbox 这样的布局需要大量调整才能“恰到好处”，并假设文本大小应随着设备大小的变化而固定。实际上，在许多情况下(在设备类别中，如智能手机)，使用设备缩放文本是有意义的。同时，以 HTML 格式显示文本比导出为图像(用于 SEO)更好

这可能与 CSS 相关吗？我还没有找到有关如何实现此目标的资源。

Answer 1

是的 - 这种布局可以通过使用 viewport-percentage lengths 的基础来完成(vw 或 vh 单位)以便您的页面根据浏览器窗口的大小进行缩放。

要完成这项工作，您真正需要做的就是在您的 CSS 中使用视口(viewport)百分比单位作为根元素的 font-size(body，:root，或包装器 div)，然后使用 em 单位设置内部所有内容的样式 - 这将基于浏览器大小。

要记住的一件事是 em 单元级联基于最近的父元素并指定了 font-size ，所以如果你想调整属性的大小基于根 1vw，不受字体影响，使用 rem 单位相对于根调整大小。

这是一个非常基本的布局示例，它会根据窗口宽度增大/缩小，但无论如何都会保持其准确的布局和定位。

:root {
  font-size: 1vw;
}

.wrapper {
  display: flex;
}

.side {
  flex: 0 0 20rem;
  font-size: 3em;
  position: relative;
}

.side ul {
  padding-left: 2em;
}

.side img {
  position: absolute;
  top: 20rem;
  width: 16rem;
  left: 2rem;
}

.content {
  flex: 0 0 80rem;
  font-size: 3em;
}

<div class="wrapper">
  <div class="side">
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <img src="http://via.placeholder.com/350x150" />
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet felis vitae nulla efficitur mattis. Nulla cursus lectus ut libero molestie, in elementum dolor faucibus. Vivamus pretium pulvinar maximus. Quisque erat nunc, aliquet at eros id,
    ultricies placerat dui. Nullam pellentesque euismod ligula, non viverra quam ullamcorper vel. Ut feugiat est ut felis consequat tempus. Aenean molestie mauris eget turpis tincidunt, a dictum orci malesuada. Maecenas semper interdum nulla, quis gravida
    quam accumsan nec. Nunc gravida, eros in cursus vehicula, erat dolor porttitor tellus, ac congue felis ante non metus.
  </div>
</div>