自适应宽度的页面……

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4600 天前的主题，其中的信息可能已经有所发展或是发生改变。

RT... 真的好难做……

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

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

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

宽度

好难

15 条回复 • 1970-01-01 08:00:00 +08:00

zhuang

2012-04-02 04:03:55 +08:00 via iPhone

Bootstrap 2 可以考虑一下

karuto

2012-04-02 04:37:11 +08:00

inheritance, percentage, rem

xhslyf

2012-04-02 04:48:39 +08:00

你要怎么个自适应呢？左侧那栏宽度固定，右侧自适应？

tux

2012-04-02 05:57:14 +08:00

左边DVI固定宽度
右边DVI宽100%
右边DVI的左margin=左边DVI的宽

ant_sz

2012-04-02 08:30:21 +08:00 via iPad

@media 好好吧…哈哈

flyingkid

2012-04-02 09:30:16 +08:00

这个页面可能就是那条线的问题吧。

这个布局不难搞定。不考虑ie6那就更简单了。

deepure

2012-04-02 09:59:15 +08:00

udonmai

2012-04-02 10:20:16 +08:00

自适应用js的话一般不都是需要更换背景图的分辨率或者更改对不同终端的支持比如移动终端和电脑之间的切换。。

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

2012-04-02 11:36:26 +08:00

main
|-- main-inner
|-- sider fix

fanzeyi

2012-04-02 11:39:25 +08:00

@BB9z 哦哦果然是我昨天傻逼了…… 加了 width: 100%; ...

BB9z

2012-04-02 11:45:10 +08:00

@fanzeyi 谁都有2B的时候 :)

liyandong

2012-04-02 12:14:02 +08:00

一般自适应的不太难写呀。不过。如果border的left和right比较多的话，要注意些，不能按100%写

fanzeyi

2012-04-02 12:23:26 +08:00

@liyandong 嗯主要是昨天傻逼了给某个层加上了 100% ...

liyandong

2012-04-02 12:25:49 +08:00

@fanzeyi 呵呵。确实。如果代码写多了的话，查错比较麻烦些。但是有审查元素这个东西就简单多了