解决不同设备和其分辨率下的烈焰问题，可以使用响应式设计和媒体查询来实现。下面是一个示例代码，展示如何根据不同设备和分辨率设置烈焰的样式：

HTML代码示例：

CSS代码示例：

.fire {
  width: 100px;
  height: 100px;
  background: url('fire.png') center center no-repeat;
  background-size: cover;
}

/* 媒体查询 */
@media (max-width: 768px) {
  /* 在小屏幕上调整烈焰的大小 */
  .fire {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 1200px) {
  /* 在大屏幕上调整烈焰的大小 */
  .fire {
    width: 200px;
    height: 200px;
  }
}

在上面的示例中，.fire 类设置了烈焰的基本样式，包括宽度、高度和背景图像。使用 background-size: cover; 属性可以确保背景图像在容器中完全填充。

接下来，使用媒体查询来调整烈焰在不同设备和分辨率下的大小。在示例中，使用 @media 媒体查询指定了两个条件：最大宽度为 768 像素的小屏幕和最小宽度为 1200 像素的大屏幕。根据不同的条件，通过调整 .fire 类的宽度和高度属性来改变烈焰的大小。

当浏览器宽度小于 768 像素时，烈焰的宽度和高度将被调整为 50 像素；当浏览器宽度大于等于 1200 像素时，烈焰的宽度和高度将被调整为 200 像素。通过这种方式，可以根据不同设备和其分辨率下的屏幕大小，自动调整烈焰的大小，以确保在不同设备上都能良好显示。