Html 不同设备中的图像大小

我面临一个问题。我有一个简单的wap网站。在移动设备上，网站是完美的；但是当你在电脑上浏览时，这些图像看起来很糟糕。我使用相对大小（%）而不是绝对大小（px）来调整图像大小，因为它会随着屏幕的变化而变化。有没有办法让它们比现在更完美

---

任何帮助都将不胜感激。

您正面临一个问题，您希望根据显示的屏幕类型更改站点的布局。能够这样做的布局称为自适应或响应式布局，可以使用一些高级CSS知识来完成

检查这篇精美的文章：

当然，没有真正需要自己实现所有东西——有许多不同的框架可供选择

检查此列表以了解初学者：

---

然而，针对您的特殊情况，一个简单的解决方法就是限制内容的宽度，所以它不会延伸到笔记本电脑上。看看我在说什么，把你的代码> <代码>标签改为<代码> <代码>。

你可以考虑使用一个叫做“代码>媒体查询< /代码>的东西，它允许你使用不同的样式表来访问你的网站的不同设备。在

标记中，可以编写如下内容：

@media screen and (min-width: 400px) {
    h1 {
        background: black url('test.jpg') no-repeat 50% 50%;
    }
}

这意味着样式表仅适用于宽度大于400px的屏幕

还可以使用以下语法指定外部样式表：

<link href="screen.css" rel="stylesheet" media="screen">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 480px)">

在前一个样式表中，为桌面添加CSS，在后一个样式表中，通常为移动设备添加CSS。有关媒体查询的更多信息：

---

另外，尝试不使用%而不是像素，使用像素，但根据所使用的设备进行更改

正如一些答案所提到的，您正在寻找适应性/响应性布局/设计。如果还希望根据布局显示不同分辨率的图像，请查看

元素和多边形填充：