我喜欢在我的页面上使用很多独特的图形,这通常会导致根据可用的屏幕宽度/高度制作不同的页面大小。
这里有两个例子:
http://www.uvm.edu/~areid/homesite/ - 图像漂浮在我的屏幕底部,但在更大的浏览器中,图像漂浮在靠近中间的位置,使它看起来不对。当窗口底部与图像底部对齐时效果最佳
www.stevenlebel.com - 它根据检测到的显示器大小加载两个不同的页面。
这似乎有很多冗余编码。我的问题是,如何使切片/Photoshop 图像很好地过渡到不同的屏幕尺寸。 Photoshop 是否允许您制作 DIVS 而不是表格? 当浏览器窗口大小发生变化时,我可以让 Photoshop 创建的每个切片变大/变小吗?
如果有人对创建这样的网站有任何意见,我很想听听他们的意见。
谢谢
凯蒂
最佳答案
使用 media queries 的组合正确选择breakpoints 、 Sprite 或单个图像,甚至像 foresight.js 这样的库您可以获得想要的结果。
媒体查询将允许您为不同的屏幕组设置您的网站,断点设置为涵盖大多数平板电脑、手机等。然后您可以从 sprite 或完全单独的图像加载不同的图像版本。最后,foresight.js 将查看屏幕分辨率和可用带宽,以便在需要时为视网膜浏览器加载更高分辨率的图像。
关于html - 如何为所有显示尺寸设计网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13221895/