0

我喜欢在我的页面上使用很多独特的图形，这通常会导致根据可用的屏幕宽度/高度制作不同的页面大小。

这里有两个例子：

http://www.uvm.edu/~areid/homesite/ - 图像漂浮在我的屏幕底部，但在更大的浏览器上，图像漂浮在中间附近，使它看起来不好看。窗口底部与图像底部对齐时效果最佳

www.stevenlebel.com - 它根据检测到的显示器尺寸加载两个不同的页面。

这似乎是很多冗余编码。我的问题是，如何使切片/Photoshop 图像很好地过渡到不同的屏幕尺寸。Photoshop 是否允许您制作 DIVS 而不是表格？当浏览器窗口大小发生变化时，我可以让 Photoshop 创建的每个切片都增大/缩小吗？

如果有人对创建这样的网站有任何意见，我很想听听他们要说什么。

谢谢

凯蒂

4

3 回答 3

3

使用媒体查询与正确选择的断点、精灵或单个图像的组合，甚至像foresight.js这样的库，您可以实现您正在寻找的结果。

媒体查询将允许您为不同的屏幕组设置站点，并设置断点以覆盖大多数平板电脑、手机等。然后您可以从精灵或完全单独的图像加载不同的图像版本。最后，foresight.js 将查看屏幕分辨率和可用带宽，以便在需要时为视网膜浏览器加载更高分辨率的图像。

于 2012-11-04T19:22:22.137 回答
0

将页面大小设置为

.page
        { 
        width:100%
        margin-left:auto;
        margin-right:auto;

        }
于 2012-11-05T06:22:57.150 回答
0

浏览mediaqueri.es并了解其他人如何解决您的问题，同时不要忘记dribbble。我想你知道个人电脑的网页设计，其他的是智能手机、平板电脑和电视。对移动操作系统上应用程序的用户界面有一些基本的了解。阅读Android 设计、iOS 应用程序设计策略和Windows 8 应用程序设计 UX。在那之后，我认为您将有一个适当的设计来解决您的问题。然后学习css3 媒体查询，从html5boilerplate开始编码，从移动设计开始。祝你好运！

于 2012-11-10T10:06:46.543 回答