响应式设计帖子

Question

我正在尝试设置带有图片的帖子。我已经写了一个代码，图片的位置正确，但是仅在手机上。我可以使用任何CSS命令吗？

.image1{
  height: 100px;
  weight: 100px;
}
.image2{
  height: 100px;
  weight: 100px;
  position: relative;
  left: 135px;
}

我已经使用了

@media only screen and (min-device-width: 601px) and (max-device-width: 768px)

但无法解决问题。

当然，我已经在标题上设置了

<meta name="viewport" content="width=device-width, initial-scale=1.0">

任何建议如何设置PC图片的位置？

Answer 1

使用百分比%而不是PX，因此它将使用任何设备中的百分比，并且您可以在任何媒体查询中控制该百分比，这将为您节省很多。 另一个技巧是，您可以在图像上使用宽高比以适合任何设备，并使用名为object-fit的属性，它将帮助您防止图像被挤压。