640px PSD文件需要修复所有设备

我只有一个PSD文件，其宽度640px从客户端，我必须修复所有设备，从ios到不同屏幕设备的窗口。640px PSD文件需要修复所有设备

我的问题是，我不想为小尺寸和大尺寸的设备裁剪不同的图像。我搜索了一些解决方案，但我对所有使用视口，媒体查询困惑。和新的iPhone5有1136px决议我不知道如何实现这个PSD。我想裁剪所有设备的一个尺寸的图像是否有可能

来源

2012-09-13 mikul

找了很久解决方案后，我发现，u可以使用

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

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

来源

2012-09-28 19:46:36 mikul

我不认为你可以'裁剪'使用CSS，除非有一种排序“哈克”的方式来做到这一点。

但使用mediaqueries你肯定可以调整它的大小非常容易地适应您的浏览器：

<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%;

}

largeres.css

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

}

来源

2012-09-13 15:14:39 samayres1992

其实，我认为裁剪有可能使用CSS中的clear属性 – Sean

http://www.impressivewebs.com/css-clip-property/ – Sean

是的，我看着它，我来了跨越一些css3元素。我想这完全取决于裁剪需要的兼容性。可能不是现在这样做的最佳选择。它甚至没有正确支持ie9或更低。 – samayres1992

你可以将它设置为背景图片，并使用background-size: cover伸展它为你，为更多信息see here，并演示here（尝试调整您的浏览器窗口看到它在行动）。

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

媒体查询也是一种可能的解决方案，但恐怕我对它们的了解不多，所以您对拥有1000像素宽（技术上）的屏幕的新智能手机进行了很好的说明。

我敢肯定会有解决方案使用媒体查询，可能与手持设备而不是媒体？我不完全确定，但如果你想探索更多，我相信Google会成为你的朋友。

来源

2012-09-13 15:27:55 Sean

我只是寻找移动设备的解决方案。我知道我们可以通过viewport来实现：scale，mediaquery，但是我很困惑以哪种方式使用哪一种 – mikul

640px PSD文件需要修复所有设备

回答

相关问题