我希望能够根据用户使用的屏幕分辨率更改我的网页背景图像:
如果屏幕分辨率大于或等于 1200*600,则 background = mybackground.jpg no-repeat 否则。我怎样才能做到这一点?
请您参考如下方法:
讨论了非常有效的纯 CSS 方法 here .特别检查了两种技术,我个人更喜欢第二种,因为它不依赖于 CSS3,它更适合我自己的需求。
如果您的大部分/所有流量都具有支持 CSS3 的浏览器,则第一种方法实现起来更快、更清晰(为方便起见,Zoidberg 先生在此处的另一个答案中复制/粘贴了此内容,尽管我会访问 the source 以了解更多背景信息有用)。
CSS 的另一种方法是使用 JavaScript 库 jQuery 来检测分辨率变化并相应地调整图像大小。 This article涵盖 jQuery 技术并提供现场演示。
Supersized是一个专门为静态全屏图像和全尺寸幻灯片设计的 JavaScript 库。
全屏图像的一个很好的技巧是事先用正确的比例缩放它们。当使用 supersized.js 或 1680x1050 用于其他方法时,我通常的目标是 1500x1000 的大小,将照片的 jpg 质量设置为 60-80% 之间,如果可能的话,文件大小在 100kb 或更少的区域内,而不会对质量造成太大影响.