可变宽度网站

我尝试创建一个可变宽度的网站，但是我对图像有问题。我希望网站能够在更宽的显示器上显示更大的图像和字体，而对于普通显示器则更小。我想过的解决方案是使用百分比，但图像（对于按钮，背景和标题）在调整大小时看起来很糟糕。是否有另一种解决方案来根据浏览器宽度调整图像和内容的大小？可变宽度网站

谢谢

来源

2010-11-13 Andrei

我不知道我理解你的问题。显然缩放图像会使它们看起来很糟糕，所以你想要做什么？ – casablanca 2010-11-13 16:14:14

如果您尝试通过在“”标签或CSS样式中更改其“高度”和“宽度”值来调整图像大小，则模糊和像素化可能是您所期望的最佳效果。通常，图像不会调整大小以适合屏幕大小。 – 2010-11-13 16:15:29

首先要做的是检查你是否真的需要这些图像。我没有见过他们，所以我认为你需要他们很糟糕。

但你实际上并不需要任何JavaScript来做到这一点。

根据您定位的受众群体以及构建网站的时间，您可以尝试使用CSS媒体查询来确定用户显示的宽度。（您可以在这里了解更多：http://www.alistapart.com/articles/responsive-web-design/）您可以使用简单的CSS条件语句来检查目标显示分辨率。如果您知道什么样的展示类型是您的潜在客人中最受欢迎的展示类型，您可以为不同的用户准备3-4套不同尺寸的图片。

这样您可以将不同尺寸的图像传送到不同的用户分辨率。

但首先让100％你需要的图像，你可以用CSS实现相同的效果。

来源

2010-11-13 17:01:33 Cyrylski

那么，我有每个按钮的图标，所以我不明白我如何使用CSS实现相同的事情。感谢您的回复，我会首先尝试这个解决方案，但想法是让一个网站可以完全调整大小。 – Andrei 2010-11-14 15:43:02

然后我想你会需要javascript +服务器端的图片大小调整。我不是合适的程序员，但我想我会寻找Javascript解决方案，它会嗅探用户显示维度，发送维度参数并通过一些AJAX查询调用图像来重新加载。我不知道任何体面的图像调整大小的解决方案，是足够快，不是服务器端。 – Cyrylski 2010-12-29 10:58:04

您可能需要JavaScript和CSS的混合;使用JavaScript来确定屏幕的尺寸，并使用它来计算重新调整尺寸的比例，并更改对象的CSS属性。

您可能还想在执行样式表时使用em而不是像素大小。

调整图像大小时，还必须记住纵横比，所以不能只将百分比值应用于宽度和高度。

来源

2010-11-13 16:13:43 Extrakun

我不明白你对高宽比的看法。如果将宽度和高度乘以相同的百分比，它是如何保持不变的？ – 2010-11-13 16:19:50

嗯，我想我已经很累了，可能还想着别的东西，你就在那里。 – Extrakun 2010-11-13 16:21:40

可变宽度网站

回答

相关问题