Question

我正在开发一个项目，该项目需要在HTML中绘制类似于字母“T”的内容并使其具有响应性。

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

我在交界点有一张图片。我希望整件事能得到回应。

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

但我面临的问题如下：

我应该在CSS和HTML中遵循哪种策略来确保响应？

我对HTML非常陌生，并具备使图像响应等基本知识。

谢谢！

Answer 1

如果您在img上使用此代码，则会使其响应

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

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

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

下面是一个小提琴。

当您调整浏览器大小时，您会注意到，当图像缩小时，线条会保持不变。当显示开始变小时，线停止移动。此时，您需要使用媒体查询来调整您想要线上边距的距离。

这可能看起来像这样

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

你也可以让.line类从一开始就有一个基于百分比的边距，并保存自己做媒体查询。什么都适合你。