响应式设计帖子

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

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