前端问题请教，关于页面自适应布局

V2EX = way to explore

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

现在注册

已注册用户请登录

V2EX 提问指南

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

在宽屏幕下，显示为：

有没有可能在宽度缩小后变为：

这个样子？最方便的实现方式是什么？

宽屏幕

页面

请教

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

bzw875

2014-03-26 11:08:18 +08:00

用js吧，CSS我不知道怎么做到。

learnshare

2014-03-26 11:09:39 +08:00

查看一下源码就可以了吧。

具体实现的话，左右两块内容可以通过浮动实现，窄屏换行可以通过 MediaQuery + display（inline -> block）实现

andybest

2014-03-26 11:09:51 +08:00

@bzw875 谢谢，纯JS实现感觉有点重，有没类似的响应式布局的前端框架可以实现？

还有。。。CSS+HTML是肯定无法实现的对吗

andybest

2014-03-26 11:10:36 +08:00

@learnshare 页面是我 PS 的，就是画个例子说明情况，实际没见过这样的动态页面

learnshare

2014-03-26 11:15:43 +08:00

@andybest HTML+CSS 可以实现，不算太复杂，抽空我写写看

sneezry

2014-03-26 11:17:16 +08:00

media query

NemoAlex

2014-03-26 11:18:48 +08:00

两种方式：
优雅的方式是使用 CSS Media Query，不过低级浏览器会不支持
详见这里： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

JS 的话就不够优雅，不过胜在兼容性好
基本思路是在页面初始化和 resize 的时候检查一下页面宽度，根据不同条件给一个比较外层的元素一个 Class，例如在默认是窄的情况，宽的时候是 .wide
然后 CSS 里写 .wide xxx {} 来覆盖默认的样式就好了

jsonline

2014-03-26 11:19:54 +08:00 via Android

flexbox

binux

2014-03-26 11:19:59 +08:00

media query 可以做到啊

learnshare

2014-03-26 11:21:09 +08:00

@NemoAlex 这个方法可以做出来

Keinez

2014-03-26 11:28:06 +08:00 via Android

media query，写两套css即可。