V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
hellohacker
V2EX  ›  程序员

在设计网页宽度的时候,大家是怎么选择网站整体宽度的?(屏幕分辨率问题)

  •  
  •   hellohacker · 2014-04-11 11:43:27 +08:00 · 4577 次点击
    这是一个创建于 3909 天前的主题,其中的信息可能已经有所发展或是发生改变。
    现在做了一个网站 由于内容比较多,做成了宽度是1200px,但是在分辨率是1024*768的屏幕下面,会先了难看的底部滚动条,而且头部的一些内容页被遮挡住了,用户提现比较差,想听听大家的建议
    17 条回复    1970-01-01 08:00:00 +08:00
    jsonline
        1
    jsonline  
       2014-04-11 11:49:15 +08:00   ❤️ 4
    默认宽度 960~1000
    使用 media query 处理宽屏(>1280)、Pad(768)和手机(480)

    .container{
    width: 100%;
    max-width: 1000px;
    @media @wide-screen{max-width: 1280px;}
    @media @pad{}
    @media @phone{}
    }

    P.S.
    1. 我使用 LESS
    2. 我只兼容 IE 8+
    botao1
        2
    botao1  
       2014-04-11 11:49:33 +08:00
    或者选择“固定宽度960px” 这种经典方案
    示例: http://960.gs/

    或者选择响应式设计,不同分辨率区间不同布局
    示例: http://mediaqueri.es/
    zakokun
        3
    zakokun  
       2014-04-11 11:52:13 +08:00
    一般都是960的基础分辨率,洋气点的就是响应式了。不过我弄不来只能借助bootstrap...
    Keinez
        4
    Keinez  
       2014-04-11 12:39:29 +08:00 via Android
    不应该设计固定宽度的布局……
    learnshare
        5
    learnshare  
       2014-04-11 12:59:53 +08:00   ❤️ 1
    960px 还算目前的主流吧,搞得高级一点,可以适配 320, 640, 960, 1200, 2000 吧,media query 响应式是必须的
    tension
        6
    tension  
       2014-04-11 13:42:36 +08:00
    做成响应式的呗...

    @media (max-width: 768px) {
    body {
    width: 768px;
    }
    }
    coraline
        7
    coraline  
       2014-04-11 14:12:01 +08:00
    width: ..%; max-width: ..px;

    @media
    yukirock
        8
    yukirock  
       2014-04-11 14:43:01 +08:00
    爲什麼要 1200px?就算內容再多也不見得要做成這麼寬啊。網站可以給個鏈接讓大家看看嗎?
    再說就算是 1200px,也得是 responsive 可以匹配到這一檔,至少得有一個 960 能用的版本吧。
    vibbow
        9
    vibbow  
       2014-04-11 14:53:01 +08:00
    @yukirock 1080p屏幕现在也算是主流了的啊,在1920px屏幕上只显示1200px,实际上也并不是那么宽。更何况还有2K屏幕这样的存在。
    yukirock
        10
    yukirock  
       2014-04-11 16:37:27 +08:00
    @vibbow

    http://www.w3schools.com/browsers/browsers_display.asp

    再說 2K 只是存在而已,它才多少份額啊。
    lemonlwz
        11
    lemonlwz  
       2014-04-11 16:52:59 +08:00
    现阶段 1000 是比较合适的选择(pc端)
    txlty
        12
    txlty  
       2014-04-11 17:45:23 +08:00
    即使大屏幕,很多人习惯小窗口看网页。当然是960/980。
    learnshare
        13
    learnshare  
       2014-04-11 17:49:13 +08:00
    你们无法理解 2560px 的屏幕看现在的网页有多龌龊...
    S1ahs3r
        14
    S1ahs3r  
       2014-04-11 22:59:22 +08:00
    @media 走起,务必不要写死.想想市面上都有4K 这种怪物了..
    johnlui
        15
    johnlui  
       2014-04-12 01:24:12 +08:00
    @learnshare 这是13寸rMBP的分辨率,其实一般人调的都是1280*800原始分辨率或者高一点的1440*900,几乎没有人调到最高(MAC)下1920*1200,当然windows进去就默认的2560,吓死人。。。
    yakczh
        16
    yakczh  
       2014-04-12 09:51:53 +08:00
    用js得到document.body.clientWidth, 然后判断动态输出相应的布局和尺寸
    boogiefer
        17
    boogiefer  
       2014-04-12 12:12:08 +08:00 via iPhone   ❤️ 1
    其实你应该埋点,看看用户数据。现在1280, 1440的显示设备很普遍了。1200可以给设计师更多的发挥余地。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5361 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 209ms · UTC 09:16 · PVG 17:16 · LAX 01:16 · JFK 04:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.