如何为所有显示尺寸设计网站

Question

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

这里有两个例子：

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

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

这看起来像是大量的冗余编码。我的问题是，如何让切片/Photoshop图像很好地过渡到不同的屏幕大小。Photoshop允许你制作DIVS而不是表格吗？当浏览器窗口大小改变时，我可以使Photoshop创建的每个切片放大/缩小吗？

如果有人对创建这样的网站有任何意见，我将非常有兴趣听听他们有什么要说的。

谢谢

凯蒂

Answer 1

将media queries与适当选择的breakpoints、精灵或单独的图像结合使用，甚至使用像foresight.js这样的库，你就可以达到你想要的结果。

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

Answer 2

将页面大小设置为

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

        }

Answer 3

在mediaqueri.es上浏览一下，看看其他人是如何解决你的问题的，同时也不要忘记dribbble。我想你知道PC的网页设计，其他的是智能手机，平板电脑和电视。对移动OSes上应用程序的用户界面有一些基本了解。阅读Android Design、App Design Strategies for iOS和Designing UX for apps for Windows 8。在那之后，我想你会有一个合适的设计来解决你的问题。然后学习css3 media queries，开始使用html5boilerplate编码，并从移动设计开始。祝好运!