不同设备中的图像大小

时间:2014-06-06 19:41:10

标签: html image resize screen-resolution

我正面临一个问题。我有一个简单的wap-site http://tornet.ml。在移动设备上,网站是完美的;但是当在PC上浏览时,图像显得很残忍。我使用相对大小(%)而不是绝对(px)来调整图像大小,因为它会根据屏幕而变化。有没有办法让这些比现在更完美?

任何帮助都会非常感激。

2 个答案:

答案 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/

此外,请尝试不使用%而不是像素,使用像素,但根据使用的设备更改它们。