V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
fanzeyi
V2EX  ›  CSS

自适应宽度的页面……

  •  
  •   fanzeyi ·
    fanzeyi · 2012-04-02 03:34:57 +08:00 · 5555 次点击
    这是一个创建于 4600 天前的主题,其中的信息可能已经有所发展或是发生改变。
    RT... 真的好难做……

    今天晚上做了一个.. 宽度真是各种麻烦.. 最后被迫用 js 搞了宽度的自适应.. 感觉好不爽..

    有什么技巧么.... 求教..

    PS. 俺做的这个, 饭否网页客户端.. 感觉渣掉了.. 基本抄的 http://obtvse.herokuapp.com/ :

    15 条回复    1970-01-01 08:00:00 +08:00
    zhuang
        1
    zhuang  
       2012-04-02 04:03:55 +08:00 via iPhone
    Bootstrap 2 可以考虑一下
    karuto
        2
    karuto  
       2012-04-02 04:37:11 +08:00
    inheritance, percentage, rem
    xhslyf
        3
    xhslyf  
       2012-04-02 04:48:39 +08:00
    你要怎么个自适应呢?左侧那栏宽度固定,右侧自适应?
    tux
        4
    tux  
       2012-04-02 05:57:14 +08:00
    左边DVI固定宽度
    右边DVI宽100%
    右边DVI的左margin=左边DVI的宽
    ant_sz
        5
    ant_sz  
       2012-04-02 08:30:21 +08:00 via iPad
    @media 好好吧…哈哈
    flyingkid
        6
    flyingkid  
       2012-04-02 09:30:16 +08:00
    这个页面可能就是那条线的问题吧。

    这个布局不难搞定。不考虑ie6那就更简单了。
    deepure
        7
    deepure  
       2012-04-02 09:59:15 +08:00
    udonmai
        8
    udonmai  
       2012-04-02 10:20:16 +08:00
    自适应用js的话一般不都是需要更换背景图的分辨率或者更改对不同终端的支持比如移动终端和电脑之间的切换。。
    BB9z
        9
    BB9z  
       2012-04-02 11:35:38 +08:00
    这个布局不算难啊。

    在我的经验里,用div做自适应布局的一个技巧就是避免/减少 100%的显式声明,div本身具有自适应性。

    大半年没写CSS了,以下仅供参考……

    main 左留固定边距
    main-inner
    sider fix(IE6 absolute或js)定位到左上,无边距100%高

    头像类似。

    不过更好的方法好像是overflow, http://hikejun.com/blog/2011/10/26/近期面试感受/

    其实高宽同时自适应最快最有效的方式还是table……
    BB9z
        10
    BB9z  
       2012-04-02 11:36:26 +08:00
    main
    |-- main-inner
    |-- sider fix
    fanzeyi
        11
    fanzeyi  
    OP
       2012-04-02 11:39:25 +08:00
    @BB9z 哦哦 果然是我昨天傻逼了…… 加了 width: 100%; ...
    BB9z
        12
    BB9z  
       2012-04-02 11:45:10 +08:00
    @fanzeyi 谁都有2B的时候 :)
    liyandong
        13
    liyandong  
       2012-04-02 12:14:02 +08:00
    一般自适应的不太难写呀。不过。如果border的left和right比较多的话,要注意些,不能按100%写
    fanzeyi
        14
    fanzeyi  
    OP
       2012-04-02 12:23:26 +08:00
    @liyandong 嗯 主要是昨天傻逼了给某个层加上了 100% ...
    liyandong
        15
    liyandong  
       2012-04-02 12:25:49 +08:00
    @fanzeyi 呵呵。确实。如果代码写多了的话,查错比较麻烦些。但是有审查元素这个东西就简单多了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3090 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 13:48 · PVG 21:48 · LAX 05:48 · JFK 08:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.