html - 如何在 HTML 中绘制响应式 'T' 形状

Question

我正在从事一个元素，该元素需要在 HTML 中绘制类似于字母“T”的内容并使其响应。

--------IMG-------------------------------------
         |
         |
         |

我在交界处有一张图片。我希望整个事情都能做出响应。

很遗憾，我无法共享代码，因为图表详细信息是专有的。

但我面临的问题如下:

1. 当我调整窗口大小时，垂直线的移动速度与水平线不同，因此垂直线不再位于图像下方。

我应该在我的 CSS 和 HTML 中遵循什么样的策略来确保它是响应式的？

我是 HTML 的新手，并且具有使图像响应等的基本知识。

谢谢!

Answer 1

如果您在您的 img 上使用此代码，它将使其响应

img {
  max-width:100%;
  height:auto;
  display:block;
}

这将确保您的图像随着浏览器的缩小而缩放。

要使线条保持在同一位置，请确保它与图像位于同一容器内。然后您可以只调整线条的边距。

下面是一个 fiddle 。

https://jsfiddle.net/15fmcs5e/

您会注意到，在调整浏览器大小时，当图像缩小时，线条会保留在原位。当显示开始变小时，线停止移动。此时，您需要使用媒体查询来调整您希望线上的边距超出多少。

看起来像这样

https://jsfiddle.net/L1bbfxdq/1/

@media only screen and (max-width: 836px) {
   .line {
     margin-left:60px;
  }
}

您也可以让 .line 类从一开始就有一个基于百分比的边距，这样就不用自己做媒体查询了。最适合您的。