2

我只有一个来自客户端的宽度为 640px 的 PSD 文件，我必须修复所有设备，从 ios 到具有不同屏幕设备的 windows。

我的问题是我不想为小型和大型设备裁剪不同的图像。我搜索了一些解决方案，但我对所有使用视口、媒体查询的人感到困惑。新的 iphone5 有 1136px 的分辨率，我不知道如何使用这个 PSD。我想为所有设备裁剪一个尺寸的图像是否可以

4

3 回答 3

1

在寻找解决方案很长时间后，我发现你可以使用

<meta name="viewport" content="width=640">

让浏览器为您做其他工作。这是我从 apple.com 找到的。只是查看源http://www.apple.com

于 2012-09-28T19:46:36.797 回答
0

我不认为你可以使用 css 来“裁剪”，除非有一种“hacky”的方式来做。

但是使用媒体查询，你肯定可以很容易地调整它的大小以适应你的浏览器：

<script>
      <link rel="stylesheet" href="css/largeres.css" media="screen and (min-width: 1236px)" > 

      <link rel="stylesheet" href="css/mediumres.css" type="text/css" media="screen and (max-width: 720px)">

      <link rel="stylesheet" href="css/smallres.css" type="text/css" media="screen and (max-width: 360px)">
</script>

smallres.css

yourImage{
    height: 60%;
    width: 60%;

}

mediumres.css

yourImage{
    height: 80%;
    width: 80%;

}

更大的.css

yourImage{
    height: 100%;
    width: 100%;

}

于 2012-09-13T15:14:39.867 回答
0

您可以将其设置为背景图像并用于background-size: cover为您拉伸它，有关更多信息，请参见此处，以及此处的演示（尝试调整浏览器窗口的大小以查看它的实际效果）。

不幸的是，因为这是一个 CSS3 属性，IE8 及以下不支持它，您可以使用过滤器来克服这个问题（第一个链接有更多信息），或者您可以使用涉及 JavaScript 的更复杂的解决方案。

媒体查询也是一种可能的解决方案，但恐怕我对它们了解不多，您对具有（技术上）超过 1000 像素宽的屏幕的新智能手机提出了一个很好的观点。

我敢肯定会有一种使用媒体查询的方法，可能使用手持设备而不是媒体？我不完全确定，但如果您想进一步探索，我相信 Google 会成为您的朋友。

于 2012-09-13T15:27:55.563 回答