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

标签 html css user-interface slice

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

这里有两个例子:

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/

相关文章:

html - 数字不显示在 iPhone/ios 上

javascript - (jquery).load 函数

html - 不同部分的CSS定位

java - 在 Swing 中构建一个类似于 SO 标记的搜索模块 UI

html - css:多重效果导致翻转无效

javascript - Bootstrap slider 不工作

javascript - 在以编程方式创建的 div 上应用 css 规则

javascript - IE7下拉菜单对齐问题

等式 5((θ/β) - cos(2πθ/β)) 的 Java Swing GUI

.net - F# 是 .net windows 开发的可用语言吗