Question

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

合理性：诸如flexbox之类的布局需要大量调整才能“恰到好处”，并假定文本大小应随设备大小的变化而固定。实际上，在很多情况下（在设备类别内，如智能手机），使用设备缩放文本是有意义的。同时，最好将文本包含在HTML中，而不是导出为图像（用于SEO）

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

Answer 1

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

要做此工作所需要做的全部工作就是以视口百分比单位作为根元素（font-size，body或包装div的:root来启动CSS。），然后使用em单位设置内部所有内容的样式-这将基于浏览器的大小。

要记住的一件事是em单元基于指定了font-size的最接近的父元素进行级联，因此，如果要根据根{{1} }，而不会影响字体，请使用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的CSS比例转换（比例），包括文本，适合宽度的图像

1 个答案: