我正面临一个问题。我有一个简单的wap-site http://tornet.ml。在移动设备上，网站是完美的;但是当在PC上浏览时，图像显得很残忍。我使用相对大小（％）而不是绝对（px）来调整图像大小，因为它会根据屏幕而变化。有没有办法让这些比现在更完美？
任何帮助都会非常感激。
答案 0 :(得分：1)
您正面临一个问题，您希望网站的布局根据所显示的屏幕类型而改变。能够执行此操作的布局称为自适应或响应式布局，可以使用一些高级CSS知识来完成。
检查这篇好文章：http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
当然，没有必要自己实现所有内容 - 有许多不同的框架可供选择。
查看此列表的初学者：http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
然而，针对您的特定情况的简单解决方法只是限制您的内容的宽度，因此它不会在笔记本电脑/个人电脑上延伸。要查看我正在谈论的内容，请将<body>代码更改为<body style="width:500px;">。
答案 1 :(得分：0)
您可以考虑使用名为Media Query的内容，它允许您为用于访问您网站的不同设备提供不同的样式表。在<style>标记内，您可以编写如下内容：
@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，通常用于移动设备。有关媒体查询的更多信息：http://www.w3.org/TR/css3-mediaqueries/
此外，请尝试不使用％而不是像素，使用像素，但根据使用的设备更改它们。