讨论一下当前普及大尺寸显示器下网页设计尺寸的兼容问题

2012-09-22 11:33:28 +08:00
 AJ
目前大尺寸的显示器基本很普及了,最普遍的是19寸,其次是20寸,22寸。。。。
分辨率:
19“ 1440x900
20" 1600x900
22" 1680x1050
27" 1920 x 1080

如果要设计一个有全屏图片的网站,难道至少要做成1680的图片才能基本兼容?
当然,27“那个就不管了,毕竟很少数。

希望大家可以互相讨论一下,或者提出更好的解决方案。
4742 次点击
所在节点    设计师
10 条回复
aeryen
2012-09-22 15:15:45 +08:00
全照1080p做,我这17显示器都是1080的……
AJ
2012-09-22 16:30:25 +08:00
@aeryen 17寸可能慢慢会减少了。目前一般都流行19寸了吧。
qiuai
2012-09-22 16:34:24 +08:00
如果需要图片全屏,就把边界做成渐变到纯色吧.目前我就是这么解决的...然后边界全部自适应.
loading
2012-09-22 16:39:45 +08:00
按1440的做,图片采用渐变等形式过度至纯色,毕竟两边只有(1920-1600)/2=160px
paloalto
2012-09-22 17:16:57 +08:00
正好最近做的网站基本都是全屏的图片,针对不同的情况,有不同的解决办法,没有具体的尺寸限制。

1.如果是html里的img,我采用的是jquery.npFullBgImg.js这个插件。这个插件需要你在html中加一个div,插件会在这个div中插入img,可以是多张,循环播放。也可以只放一张图。
2.如果是css里的background-image,我用的是css3里的background-size:cover;
3.如果图片比较小,放大后质量不高,我会把图片用ps处理一下,加个高斯模糊效果。
4.如果客户要求在图片小、质量不高的情况下还要达到高清效果,那就需要找他们要高清大图了。
5.有些情况可以按3L、4L同学的办法来处理。

效果参考
1: http://www.foam.org/home (采用的是npFullBgImg.js)
2/3: http://han.im (图片模糊加background-size:cover)
raecoo
2012-09-22 20:23:11 +08:00
loading
2012-09-28 16:08:53 +08:00
昨天我做了这样的事:
在头部加入ie提示,升级到chrome
然后body{ zoom:1.25; _zoom:1;}
完美从1024升级到1280,其中内容区要协调word粘贴的字体大小 #content {zoom:.8;_zoom:1;}
AJ
2012-09-28 17:08:15 +08:00
其实如果设计上是以纯色或渐变颜色做底色的话,是很容易兼容的。
最大问题是全是图片类的。

我最近做的网站就是因为客户用了个22寸的显示屏看,说两空留空了,说不好看。
然后我不得已做了两种尺寸的图来兼容。
AJ
2012-09-28 17:11:46 +08:00
@raecoo thanks~ 这篇文章很有帮助。以前曾阅读过,忘了。
linuxer
2012-10-13 23:48:26 +08:00
这个确实很头痛啊。最近就写了一个这种情况的网站,做了一个渐变到纯色。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/48465

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX