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

[andybest]

在宽屏幕下，显示为：


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


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

[bzw875]

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

[learnshare]

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

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

[andybest]

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

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

[andybest]

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

[learnshare]

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

[sneezry]

media query

[NemoAlex]

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

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

[jsonline]

flexbox

[binux]

media query 可以做到啊

[learnshare]

@NemoAlex 这个方法可以做出来

[Keinez]

media query，写两套css即可。