V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
设计师推荐装备
WACOM 数位板
推荐阅读
版式设计基础教程 by 南云治嘉
版式设计全攻略 by 佐佐木刚士
AJ
V2EX  ›  设计师

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

  •  
  •   AJ · 2012-09-22 11:33:28 +08:00 · 4919 次点击
    这是一个创建于 4440 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前大尺寸的显示器基本很普及了,最普遍的是19寸,其次是20寸,22寸。。。。
    分辨率:
    19“ 1440x900
    20" 1600x900
    22" 1680x1050
    27" 1920 x 1080

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

    希望大家可以互相讨论一下,或者提出更好的解决方案。
    10 条回复    1970-01-01 08:00:00 +08:00
    aeryen
        1
    aeryen  
       2012-09-22 15:15:45 +08:00   ❤️ 1
    全照1080p做,我这17显示器都是1080的……
    AJ
        2
    AJ  
    OP
       2012-09-22 16:30:25 +08:00
    @aeryen 17寸可能慢慢会减少了。目前一般都流行19寸了吧。
    qiuai
        3
    qiuai  
       2012-09-22 16:34:24 +08:00
    如果需要图片全屏,就把边界做成渐变到纯色吧.目前我就是这么解决的...然后边界全部自适应.
    loading
        4
    loading  
       2012-09-22 16:39:45 +08:00
    按1440的做,图片采用渐变等形式过度至纯色,毕竟两边只有(1920-1600)/2=160px
    paloalto
        5
    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
        6
    raecoo  
       2012-09-22 20:23:11 +08:00   ❤️ 1
    loading
        7
    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
        8
    AJ  
    OP
       2012-09-28 17:08:15 +08:00
    其实如果设计上是以纯色或渐变颜色做底色的话,是很容易兼容的。
    最大问题是全是图片类的。

    我最近做的网站就是因为客户用了个22寸的显示屏看,说两空留空了,说不好看。
    然后我不得已做了两种尺寸的图来兼容。
    AJ
        9
    AJ  
    OP
       2012-09-28 17:11:46 +08:00
    @raecoo thanks~ 这篇文章很有帮助。以前曾阅读过,忘了。
    linuxer
        10
    linuxer  
       2012-10-13 23:48:26 +08:00
    这个确实很头痛啊。最近就写了一个这种情况的网站,做了一个渐变到纯色。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1016 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 21:30 · PVG 05:30 · LAX 13:30 · JFK 16:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.